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머 리 말 

위대한 령도자 김정일대원수님께서는 다음과 같이 지적하시였다. 

《현대과학기술의 기초는 콤퓨터입니다. 콤퓨터가 출현하고 그에 따라 정보기술이 발전하면서 
사람들이 환상적으로만 생각하던 문제들이 현실로 되고있으여 자연들 정복하고 세계를 개조하는 
인간으 I 창조적힘은 더묵더 위력한것으로 되고있습니다.》 

위대한 령도자 김정일대원수님의 현명한 령도에 의하여 오늘 우리 나라에서는 정보기 
술을 빨리 발전시킬수 있는 물질기술적토대가 튼튼히 마련되였으며 새로운 정보기술성과들 
이 련이어 이룩되여 인민경제 여러 부문의 정보화，콤퓨터화가 높은 수준에서 실현되고있 
다. 인민경제의 정보화는 콤퓨터를 떼여놓고 생각할수 없으며 를퓨터기술을 발전시켜야 인 
민경제의 정보화를 적극 다그쳐나갈수 있다. 

오늘 콤퓨터기술을 소유하는것은 사회성원으로서 응당 갖추어야 할 필수적인 자질로 
된다. 특히 콤퓨터망에서의 정보관리와 필요한 정보를 다매체편집물로 표현할줄 아는것 이 
매우 중요하다. 

위대한 령도자 김정일대원수님께서는 우리 학생들이 강성대국을 떠메고나갈 훌륭한 
인재들로 자라나도록 하시 기 위 하여 크나큰 사랑을 돌려주시 였다. 

6학년 《콤퓨터》에서는 콤퓨터망의 리용방법과 홈페지의 작성방법을 배우며 다매체 
편집물을 작성할수 있는 초보적인 지식에 대하여 배우게 된다. 

먼저 콤퓨터망을 통하여 필요한 정보를 수집하고 활용해나갈수 있도륵 하기 위하여 콤 
퓨터망의 일반적개념과 그 리용방법 및 콤퓨터망에서의 홈페지작성방법에 대한 기본적인 
지 식 을 배 우게 된 다. 그리 고 여 러 가지 다매 체 창작도구들을 리 용하여 다매 체 작품을 만드는 
일반적인 방법에 대하여 배운다. 

우리는 콤퓨터에 대한 학습을 열심히 하여 우리의 사회주의강성대국을 과학과 기술로 
떠메고나갈 유능한 인재로 튼튼히 준비함으로써 위대한 령도자 김정일대원수님의 크나큰 
믿음과 기대에 보답하여야 한다. 
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제 1 장. 를페지만들기 
게 1 4 . 홈체지에 대# 개 1 ! 

1. 인테 dl 트와웨브의 개념 

우리가 사용하고있는 콤퓨터통신망에는 국부망 ( LAN ), 지역망 ( MAN ), 광지역망 
( WAN ) 을 비롯하여 수많은 통신망이 있다. 이러한 매 통신망들은 서로 다른 하드웨어나 
통신규약정 보를 공유하거 나 협 조체 계 를 구성 하기 가 힘 들었 다. 

오늘의 정보시대에 알맞게 전세계적인 범위에서 다양하고도 신속한 정보교환문제를 원 
만히 해결하기 위하여 서로 다른 콤퓨터통신망들을 련결시킬수 있는 통일적인 통신규약 
( TCP / IP ) 에 기초하여 세계각지의 국부적인 망들을 하나로 련결시킨 세계적인 광지역망을 
인테 비트라고 한다. 즉 인터네트는 세계적규모에서 호상 접속된 콤퓨터망환경 이 라고 말할수 
있 다. 

특정한 조직내의 각 를퓨터는 국부망에서 나란히 련결되며 이 국부망에서의 임의의 마 
디점은 모두 인터네트와 물리적으로 접속되므로 인터네트에 접속한 매 콤퓨터들은 모두 인 
터네트의 다른 콤퓨터들과 직접 련결되게 된다. 따라서 인터네트는 콤퓨터들의 망이라고 
말하기보다는 망들사이의 망이 라고 하는것 이 더 적합하다. 



국부망 


현재 인터네트는 수십 억의 를퓨터와 사용자들을 망라하고있다. 

인터네트에서는 접속된 콤퓨터를 통하여 어떤 정보자료에 접근하면 그것과 련관된 문 
서들이 세계의 그 어디에 있든지 자동적으로 찾아갈수 있다. 그러므로 인터네트를 통하여 
새로운 경제정보，과학기술정보，새 소식 등과 같은 많은 정보자료들을 봉사받게 되여 그 
사용자가 점점 늘어 나고있다. 

인터네트에서 열 람기 ( Browser ) 라고 하는 말단봉사프로그람을 리용하여 사용자는 간 
단한 마우스의 사용으로 여 러 봉사기 에로 이동하면서 각이한 정보를 손쉽게 열 람할수 있다. 
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이와 같은 문서방문체계가 바로 WWW (World Wide Web ： 세계적인 망) 혹은 간단히 웨 
브 ( Web ) 라고 하는 망응용체 계 이 다. 웨 브의 정 보구성단위 는 여 러 가지 이 름으로 불리 우는데 
그가운데서 가장 자주 쓰이는것은 콤퓨터의 한화면에서 볼수 있는 자료인 폐지 ( page ) 와 문 
서 ( document ), 자원 ( resource ) 이다. 보통 페지는 본문，도형，비데오，화상，음성 및 그 
결합체인 다매체로 구성된다. 

웨 브에 서 는 URL ( Uniform-Resource Locator ： 유일 자원지 시 기 ) 이 라고 하는 주소를 
사용하는데 이것은 인터네드싸이 드，웨브페 지 또는 웨브페 지에 it 함된 그림들과 같은 정보 
들의 위 치를 표시 하기 위해 사용하는 주소이 다. 

우리는 모든 인터네트설비를 이름으로 식별하지만 를퓨터는 수자주소로 식별한다. 그 
터므로 우리 가 사용하는 서로 다른 이름을 가진 각종 설비들을 콤퓨터 가 사용하는 수자기 
억기주소와 대 응시키는 일종의 엄격한 대 응관계 가 필요하다. 

인터네트에 련결되는 매개 설비의 인터네트규약 ( IP ) 주소는 유일한 32 bit 수자인데 IP 
주소는 보통 4개 조의 8 bit 수자로 쓰고 점으로 분할한다. 이 런 표시 방식은 련관주소모임을 
지 정 하기 쉬 우며 인터네 트의 경 로콤퓨터 가 통보의 다음방향을 판단하는데 도 편 리 하다. 

각종 조직들은 많은 IP 주소토막을 가지고 차례로 그 주소를 인터네트에 접속해야 할 
설비들에 분배하는데 여기에는 절대다수의 콤퓨터들이 포함된다. 례를 들어 하나의 작은 
규모의 단체는 191.57.126.0 부터 191.57.126. 255까지와 같이 256개의 IP 주소를 얻을수 
있으며 매우 큰 기구는 첫 8 bit 수자가 특수한 모든 IP 주소 례컨대 12.0.0.0 부터 
12.255.255. 255까지와 같은 1 600만여개의 IP 주소를 얻을수 있다. 

사람들이 우에서와 같은 IP 주소의 수자들을 처리하거나 기억하기 힘들므로 인터네트 
우의 설비는 문자화된 이름도 가지고있다. 이 런 이름의 시 작부분은 주콤퓨터이름이고 뒤부 
분은 점 차 커지는 닫긴 기 계 모임 즉 령 역 ( domain ) 인데 두개，세 개 또는 그 이상의 령 역 이 
름이 있을수 있다. 실례 로 콤퓨터주소 coml . sec . edu . kp 에서 coml 은 주콤퓨터이름이 고 
sec 는 주를퓨터 coml 의 국부령역이다. 그리고 sec 령역은 edu 령역의 일부분이며 또 edu 
령역은 kp 령역의 일부분이다. 

웨 브에 서 의 주소는 다음과 같이 구성 되 여있 다. 

규약이■://콤퓨터주소(:포구번호)/등록부경로/문서이 ■ 

실례: http :// coml . sec . edu.kp 

http ：/ / com 2. sec . edu . kp / mydata/my school , html 


웨브와 인터네트는 서로 다르다. 인터네트가 호상통신을 진행할수 있는 장치를 통하여 
서 로 련결된 를퓨터 및 기 타 설비들의 모임 이 라면 웨 브는 쏘프트웨 어 와 규약들의 모임이며 
이러한 쏘프트웨어와 규약들은 인터네트의 모든 또는 절대다수의 콤퓨터에 설치된다. 
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어떠한 추상적의미로 말하면 웨브는 하나의 거대한 문서의 모임이며 그가운데서 일부 
문서들은 서로 련결되였으며 웨브열람기를 사용하여 이 문서들을 방문하며 웨브봉사기는 
이런 문서들을 제공해준다. 

웨브열람기는 가장 간단한 경우에 문서를 제공해주는 웨브봉사기에게 어떤 문서를 방 
문하겠다는 요청을 보내고 웨브봉사기는 문서를 찾아 웨브열람기에게 보내주며 웨브열람기 
는 그 문서 를 사용자에 게 현시 해 준다. 

비록 웨브가 많은 규약을 지원하지만 가장 자주 쓰이는것은 직접 웨브문서를 지원하는 
하이퍼본문전송규약 (HTTP) 이 다. HTTP 는 웨 브열 람기 와 웨 브봉사기 사이에 통신을 진행하 
는 일종의 표준형식을 제공한다. 인터네트는 TCP/IP 통신규약，웨브봉사기와 웨브열 람기， 
홈폐지 (Home Page) 또는 하이퍼본문서술언어 HTML, 하이퍼본문전송규약 HTTP 와 같 
은 국제표준들을 리용한다. 

를퓨터망이 나 자료통신에서 는 통신규약 (Protocol) 이 라는것 이 중요한 개 념 으로 쓰인다. 

통신 규약이란 콤퓨터망에 존재하는 기계(콤퓨터나 콤퓨터주변장치)들사이에 통신이 이 
루어지기 위한 약속과 규칙들의 총체를 말한다. 말하자면 콤퓨터의 자료들은 모두 수자자 
료 즉 비트나 바이트로 이루어졌으므로 그것들이 통신될 때 무엇을 의미하며 어떤 의미를 
가지고 언제 어떻게 통신되여야 하는가를 공통짓기 위한 약속과 규칙들의 총체가 바로 통 
신규약이 라고 할수 있다. 

모든 콤퓨터망체계는 독립적 인 하나의 작은 기능을 수행하는 층들로 구성되므로 통신 
규약은 여러개의 단순한 통신기능준위를 약속하는 계층구조로 이루어진다. 다시말하여 통 
신쌍방의 대응하는 증마다에 해 당한 규약이 존재 한다. 

를퓨터 망체 계 에 서 계 층과 통신규약의 묶음을 망구성방식 (Network Architecture) 이 라 
고 한다. 

현재 세계적으로 일반화된 콤퓨터통신규약에는 TCP/IP, FTP 와 HTTP, 하이퍼본문 
등이 있다. 

인터 네 트에서는 다른 종류의 콤퓨터들과 통신을 진행할 때 TCP/IP 를 사용한다. 

TCP/IP (Transmission Control Protocol/Internet Protocol : 전송조종규약/인 터 네 트 
규약)통신규약은 인터네트를 비롯하여 일반적인 국부망들 그리고 인트라네트 (Intranet) 등 세 
계적으로 가장 널리 리용되는 통신규약이 다. 

TCP/IP 는 콤퓨터망의 조상인 Arpanet 와 그 계승자인 인터네트에서 연구되고 리용 
된 통신규약이다. 인터네트는 1969 년에 구축한 Arpanet 로부터 발단되였는데 1980 년대에 
여러 대학이나 연구기관의 망을 련결하는 련합망으로 급속히 발전하였다. 1982 년에 TCP 
/IP 규약은 콤퓨터망접속의 표준규약으로 되였으며 두 콤퓨터가 인터네트를 통하여 서로 
련결될수만 있다면 한대의 콤퓨터에서 실행되는 프로그람이 직접 다른 콤퓨터에서 실행되 
는 프로그람과 통신을 진행할수 있게 하였다. 
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FTP 와 HTTP 는 TCP/IP 보다 웃준위의 통신규약으로서 TCP/IP 통신규약이 제공되 
여 있는 망에서 사용할수 있다. 

FTP (File Transfer Protocol ： 파일전송규약)는 인터네트에 있는 원격체계와 문서를 
주고받기 위 한 통신규약이 다. 

FTP 는 원격체계에 대한 접속 (Login), 등록부 (Directory) 옮기기， 현재 등록부 
(Current Directory) 의 목록제 시，문서 를 국부적 인 체 계 에 내 리 적 재 (Download) 등을 
할수 있다. 

HTTP (Hyper Text Transfer Protocol ： 하이퍼본문전송규약)는 HTML 문서를 주 
고받기 위 한 통신규약이 다. 

HTML 문서를 보여주고 HyperLink (초련결)로 련결된 문서에 쉽게 접근할수 있는 열 
람기 에 의하여 HTTP 는 현재 가장 보편적 인 인터네트통신규약으로 되였다. 

HTTP 는 문자정보뿐아니라 그림，동화상을 비롯한 다매체자료는 물론 봉사기와의 련 
계를 통하여 봉사기쪽의 프로그람을 수행시킬수 있으므로 문서와 응용프로그람을 통합하는 
매체로 발전하고있다. 


2.홈폐지의개념 

콤퓨터망에서 리용되는 문서들은 보통 하이퍼본문과 하이퍼매체의 개념을 리용한다. 

하이퍼본문 (Hyper Text) 이라는 말은 일반본문의 기능을 초월 하는 본문문서라는 뜻을 
가지 는데 륭퓨터 본문문서 에서 련관된 정 보들이 매 듭이 라고 하는 실마리 단어 를 동해 유기 적 
으로 련결된 방식을 말한다. 여기서 매듭 (node) 은 하나의 정보를 포함하고있는 단위이며 
련결 (link) 은 매듭사이를 련결하는것을 말한다. 를퓨터의 기 억능력과 검색능력을 활용하여 
정보를 탐색할 때 문서에 련결된 항목들을 선택함으로써 다른 문서에로 옮겨갈수도 있다. 

하이퍼본문문서는 본문만을 포함하는 반면에 하이퍼매체 (hypermedia) 문서는 그림，도형， 
음성도 포함할수 있다. 

하이퍼본문이 나 하이퍼매체의 단위를 웨브에서는 페지 라고 한다. 

■페지 (home page) 란 원래 뜻으로 말하면 첫 페지 라는것 이 다. 

일반적으로 우리가 책을 읽을 때 차례를 보고 필요한 페지를 펼쳐보는것과 마찬가지로 
홈폐지는 쉽게 말하여 책의 차례를 담은 첫 폐지 라고 할수 있다. 

콤퓨터망을 통하여 전송되는 자료가 여러 부분으로 이루어져있을 때 그 자료를 받아보 
는 사람이 처음으로 보게 되는 화면 즉 폐지를 홈폐지라고 불러왔다. 

그러나 오늘날에 와서는 처음으로 보게 되는 폐지뿐만아니 라 그것과 련결되는 자료전 
체가 홈폐지라는 의미로 리용되고있다. 

오늘 홈폐지는 본문，화상，음성，동화상 등의 다매체정 보로 이루어져있으며 망을 통 
하여 전송되여 많은 각이한 사용자들이 리용하는 특성으로 하여 일정한 규칙에 의하여 작 
성된다. 



그러 한 규칙 에 의 하여 홈페 지 를 작성 할수 있게 하는 언 어 가 바로 하이 퍼 본문생 성 언 어 
HTML (Hyper Text Markup Language ) 이 다. 

하이퍼 본문생성언어 HTML 은 홈폐지를 작성 할 때 리 용하는 폐지 작성언어 이 다. 영 문 
단어 Markup language 는 책 출판업 에서 유래된것 이 다. 책 을 출판하려 면 인쇄 하기 전에 
본문을 어떻게 형식화할것인가，실례로 어떤 본문을 굵은 문자로 인쇄하도록 그 본문밑에 
물결선을 긋는것과 같이 여러가지 약속된 표식을 해놓는데 이것이 바로 Markup 이다. 

마찬가지로 홈페지에 대한 자료도 열람기가 해석할수 있게 형식화된다. 

HTML 은 본문，화상，영상，음성 등 각이한 정보들을 홈폐지에 어떻게 표시하겠는가 
를 약속된 형식으로 서술한다. 

홈폐지는 머리와 본체의 두 부분으로 이루어진다. 

머리는 홈페지의 첫 부분이다. 머리는 그 페지의 제목과 열람기가 리용하게 될 기타 
파라메터 를 포함한다. 

홈페지의 실지 내용은 본체 이다. 이것은 본문과 표식들을 포함한다. 본문은 페지 에 포 
함되 여있는 실지 정 보이 며 표식 은 문서 의 표시 를 정 의 한다. 

모든 HTML 표식은 선택적 인 속성목록이 뒤따르는 이름이며 전체는 괄호 <〉안에 놓 
인다. 

3. 홈폐지의 열람 

홈폐지의 열람은《내나라》열람기를 리용하여 진행할수 있다. 

《붉은별 2.0》에는《내나라》열람기 2. 5가 표준으로 적재되여있다. 

홈페 지 는 를퓨터 망에 서 리 용되 는 문서 이 므로 홈페 지 를 열 람하려 면 우선 를퓨터 를 망에 
가입시켜 야 한다. 

《시작》ᅳ《내나라》열람기 2. 5지령을 실행하거나 탁상면에서 그림기호 _ 를 찰 
칵하면《내나라》열람기 2.5 가 펼치진다. 


문자의 크기 »《내나라》멸람기 _ n 
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여 기 서 도구띠 아래 에 《 내 나라》，《 한마음》，《 국가망정 보쎈 터》，《 중앙과학기 술통 
보사》라고 쓴 띠가 있는데 이 띠를 리용하여 가입하고싶은 망의 홈폐지를 펼치고 자료열 
탐을 할수 있다. 

홈폐지에는 다음과 같은것들이 있다. 



중앙정보통신국흠페지 
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만경대정보쎈터홈페지 






















































































정보산업 지도국 ( KCC - 조선콤퓨터쎈 터) 오산덕정보쎈터흠페지 



평양정보센터 ( PIC ) 흠페지 
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과학기술통보사흠페지 



인민대학습당흠페지 
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조선중앙방송위원회흠페지 
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다음으로 망에 가입하기 위해서는 해당 자기의 등록된 이름과 암호를 
중앙관리소(국가망정보쎈터)에 등록된 자기의 정보와 비교해 야 한다. 

그러기 위해서 자기의 이름과 암호를 입력해주고 망에 접속하기 위한 
KPPPoE 라는 프로그람을 동작시 켜 야 한다. 

거기서 〈〈사용자이름〉〉칸에 자기의 등록된 이름을 써넣고〈〈접속암호》칸 
에 등록된 자기의 암호를 입력하고〈〈접속〉〉단추를 찰칵한다. 

그래야 망관리자 즉 국가망정보쎈터에 있는 관리자가 정보를 확인하고 
망에 가입할 권한을 준다. 

그러면 망에서 자기가 열람하려고 하는것을 마음대로 할수 있다. 



그러면 화면에 다음과 같은 창문이 펼치진다. 



이때 이 창문에서 OK 단추를 찰칵하고 과제띠의 그림기호 6_를 찰칵하 

면 《 내 나라》열 람기 2. 5가 펼처지 는데 여 기서 자기 가 접속하고싶은 망에 접 
속하여 자료열람을 하면 된다. 
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게 24 . 《천자도저찬》 


HTML 은 프로그람작성언어 가 아니 다. 그것은 계산과정 을 서술하는데는 리 용할수 없 
고 오직 웨 브열 람기 가 현시 하는 문서 들의 일 반형 식 과 설 계 에 대 하여 서 술하기 때 문이 다. 

HTML 문서 는 기 본내 용자료와 그를 배 치 하고 형 식 화하기 위한 예 약어 들로 이 루어 져 있 
는데 예약어들은 괄호 <〉로 둘러싸여있다. 이 예약어들을 꼬리표 ( tag ) 라고 하는데 이것들 
은 실지 홈페지를 펼쳐볼 때에는 나타나지 않는다. 

HTML 문서 작성은〈〈 본문편집기》를 리용하여 진행할수도 있고 웨브개 발도구를 리용 
하여 진행할수도 있 다. 

《본문편집기》를 리용하여 〈〈전자도서관》홈페지를 작성하는 과정을 통하여 HTML 
의 기본문법을 학습하기로 한다. 

1. 도서목록의 작성 

《전자도서관》홈폐지 에는 무엇보다도 해 당 도서관에 들어있는 도서들을 보여주는 도 
서목록이 있어 야 한다. 

도서목록을 작성하자면 도서를 과목별，종류별로 분류하여야 한다. 

그리 고 분류된 도서들에 대 한 목록을 작성 하기 위 하여 문자들을 입 력 하고 본문과 폐지 
의 형식화를 진행 하며 표를 작성하고 내용을 주가하여야 한다. 

1) HTML 문서작성방법 

HTML 문서 에서는 꼬리 표를 리용하여 본문에 대 한 입 력과 형식화를 진행한다. 

모든 HTML 문서에는 4개의 꼬리표 < HTML 〉，< HEAD >,〈 TITLE 〉 및 < BODY > 가 
필요하다. 

실례 : 《 시 작》ᅳ《 응용프로그람》ᅳ《 보조프로그람》ᅳ《 본문편집 기》지 령 을 실 행 하 
여 본문편집 기 를 펼 치 고 다음과 같이 입 력한다. 

< HTML > 

< HEAD >< TITLE > 문자의 크기 </ TITLE 〉</ HEAD > 

< BODY > 

<FONT SIZE ="1’’〉 전자도서관 1 
</ FONT >< BR > 

<FONT SIZE = n 2’’〉 전자도서관 2 
</ FONT >< BR > 

<FONT SIZE = n 3’’〉 전자도서관 3 
</ FONT >< BR > 

〈FONT SIZE =’’4’’> 전자도서관 4 
</ FONT >< BR > 
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<FONT SIZE= n 5”> 전자도서관 5 
</FONT> 

</BODY> 

〈 /HTML 〉 

파일차림표의 〈〈다른 이름으로 보관》지령이나 도구띠의 파일보관그림기호를 찰칵하여 
문서보관대화칸을 펼치고 우의 문서를 례하면 l - l . html 이라고 이름을 달아 보관한다. 



〈〈내나라》열람기를 펼치고《파일 ( F )》 ᅳ《파일 열기》지령을 실행하여 나타나는 파 
일열기대화칸에서 l - l . html 문서를 열어보면 다음과 같다. 



14 























































실례에서 < HTML > 꼬리표는 오직 문서가 HTML 을 리용하여 작성된것이라는것만을 
표시한다. 따라서 정 상적 인 경 우에 HTML 문서 는 모두 꼬리 표 < HTML > 로 시 작되 며 꼬리 
표 </ HTML > 로 끝난다. 

꼬리 표 < HEAD > 와 </ HEAD > 는 각각 문서 의 머 리 부의 시 작과 끝을 표시 한다. 

또한 < BODY > 는 몸체 부분의 시 작을 표시한다. HTML 문서 는 머 리 부와 본체 두 부분 
으로 구성되였다. 문서의 머 리부는 문서의 내용이 아니 라 문서와 관계된 정보를 제공한다. 
본체꼬리표사이의 내용이 문서의 내용이며 내용안에 사용한 꼬리표는 열람기가 어떻게 그 
부분의 내 용을 현시 해 야 하는가를 지 시 한다. 

꼬리 표 < TITLE > 과 </ TITLE > 사이 의 본문은 열 람기 에 의 해 현시 창문의 제 목띠안에 
표시된다. 

모든 꼬리 표들은 < HTML > 과 같은 시 작꼬리 표와 /기 호가 들어가있는 </ HTML > 과 
같은 끝꼬리 표가 있어 야 한다. 

실례에서 보여주는바와 같이 머리부의 시작꼬리표 < HEAD > 와 함께 머리부의 끝을 의 
미하는 끝꼬리 표 </ HEAD > 가 있 으며 제 목을 의 미하는 시 작꼬리 표 〈 TITLE 〉 다음에 제 목 
이 있고 그것이 끝나면 끝꼬리표 〈/ TITLE 〉 이 있다. 

실례에는 < BR > 꼬리표도 있는데 이 꼬리표는 행바꾸기를 하는 기능을 준다. < BR > 는 
끝꼬리표를 가지지 않는다. 

행바꾸기 에는 < P > 꼬리 표도 있는데 이것은 행을 바꾸면서 빈 행을 하나 삽입한다. 
< P > 꼬리표는 끝꼬리표를 가전다. 

2) 문자의 크기，색，서제 설정 

문자의 크기，색，서체는 FONT 꼬리 표를 리용하여 설정한다. 

FONT 꼬리표의 형식은 다음과 같다. 

〈FONT SIZE= “수값” 

COLOR= “색값” 

FACE= “서체명 ”〉 


</FONT> 

SIZE 는 문자의 크기를 나타내는 속성으로서 수값으로는 1~7사이의 값이 설정될수 있 
다. 여 기서 1은 제 일 작은 문자를 나타내 고 7은 제일 큰 문자를 나타낸다. 

COLOR 는 문자의 색을 나타내는 속성으로서 색값은 16진수로 표시되는 형식을 쓸수 
있다. 즉 R ( RED ： 붉은색)， G ( GREEN ： 풀색)， B ( BLUE ： 푸른색)의 합성이라는 의미에 
서 # RRGGBB 형 식 으로 되 여 있다. 실례 로 #000000은 검 은색， # FF 0000 은 붉은색， #00 FF 
00은 풀색， #0000 FF 는 푸른색， # FFFFFF 는 흰색으로 표시된다. 
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FACE 는 문자의 서체를 나타내는 속성으로서 서체명은 현재 체계가 지원하는 모든 서 
체이 름들이 다 리 용될수 있 다. 

실례로 우리 글 서체의 《청봉》체를 리용하려 한다면 KPChongbong 또는 WKL 
Chongbong 이 라고 입력하면 된다. 

3) 문자의 형식화，문서목록화，특수문자입력 

- 문자의 형식화 

문자의 형식화에는 굵게 쓰기，비껴쓰기，밑선긋기，중간선긋기 등의 내용이 포함된다. 
굵게 쓰기는 < B 〉， 비껴쓰기는 <1〉，밑선긋기는 < U 〉， 중간선긋기는 < S > 꼬리표로 정 
의된다. 또한 웃첨수붙이기는 < SUP 〉， 아래첨수붙이기는 < SUB > 로 서술한다. 

실례: 

< HTML > 

< HEAD 〉< TITLE > 글자의 속성 
</ TITLE ></ HEAD > 

< BODY > 

< B > 굵은 글자를 표시 </ B 〉< BR > 

<1〉약간 비껴쓴 글자를 표시 </ I 〉< BR > 

< U > 글자에 밑선긋기 </ U 〉< BR > 

< S > 글자에 중간선긋기 </ S 〉< BR > 
A 〈 SUP 〉2</ SUP 〉+ B < SUP 〉2</ SUP 〉=0< BR > 

</ BODY > 

</ HTML > 
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- 문서목록화 

번호붙이 기 와 표식 붙이 기 는 < UL 〉，< LI >, < OL > 꼬리 표들로 정 의한다. 

< UL 〉 꼬리표는 표식 목록의 문서가 시작된다는것을 표시하고 < LI 〉 는 항목표식을 설정 
하며 < OL > 은 번 호목록의 문서 가 시 작된 다는것 을 표시 한다. 

< LI 〉 꼬리 표는 끝꼬리 표를 요구하지 않는다. 

실례: 

< UL > 

< LI > 수학 
< LI > 물리 
< LI > 화학 
< LI > 생물 
</ UL > 

< OL > 

< LI > 수학 
< LI > 물리 
< LI > 화학 
< LI > 생 물 
</ OL > 


t 내나라》열담기 


과엔 ( F ) 변.접 ( E ) fV ) 


( b ) 玉千 m 玉含만 f 


▼ 하 ▼ © ( 七 S |[j file ：/// rootyi -3 .h 卜 | 비 [M 


Naenara 


@4 ᅵ 나斗 Q 환 다옴 Q 국가방정 SL 선 리 [j 통항4하기 令善 빈자 


하 죄라" 용 
수 434선- 


하 퍼요「-!' 

수 —4 선 

1 .2.S.4. 


생 

X 】 
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정의목록은 < DL >，< dt >, < DD > 꼬리표들로 정의 한다. 

< DL > 꼬리 표는 정 의 목록시 작을 표시하며 < DT > 꼬리 표는 열쇠 로 되 는 단어앞에 붙이 고 
< DD > 꼬리표는 해설문의 앞에 붙인다. 

실례: 

< DL > 

< DT > 수학 

< DD > 여기서는 대수，기하，해석학 등의 교과서 및 참고서들을 취급합니다. 

< P > 

< DT > 외 국어 

< DD > 여기서는 영어，로어，중국어 등의 교과서 및 참고서들을 취급합니다. 
</ DL > 



특수문자의 입력은 &기호와 ;기호로 둘러막힌 문자로 서술한다. 
아래의 표에 특수문자표를 주었다. 
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표시 

서술 

설 명 

< 

& lt ; 

안같기식기호로 사용 

> 

& gt ; 

안같기식기호로 사용 

& 

Samp ； 

문자 &로 사용 

(공백) 

& nbsp ； 

여러개의 공백을 련속하여 서술할수 있다. 

© 

& copy ； 

저작권기 호를 표시 

X 

Stimes ； 

곱하기기호로 사용 

VV 

Squote ； 

인용부호속에서 문자로 사용 


이밖에 문서형식화를 위한 여러가지 꼬리표들이 있다. 

< PRE 〉 꼬리 표는 문서 를 그대 로 표시하는 기 능을 주며 < CENTER > 꼬리 표는 문서 를 
화면의 중심 에 표시한다. 

< DIV > 꼬리 표는 문장의 표시위 치를 설정하는 기능을 준다. 

<DIV ALIGN =’’ left ’’〉: 문장들을 왼쪽으로 배 치 

<DIV ALIGN =’’ center ’’〉: 문장들을 중심에 배 치 

<DIV ALIGN =’’ right ’’〉: 문장들을 오른쪽으로 배치 

< P > 꼬리표도 역시 ALIGN 속성을 가지는데 그에 대한 설정은 다른 꼬리표들과 같은 
방법으로 해주면 된다. 

4) 페지의 배경색설정과 배경그림삽입 

홈폐지는 어떤 측면에서 보면 직관적가치를 가져야 하는것만큼 배경의 형식을 중시하 
게 된다. 

폐지의 배경색은 < BODY > 꼬리표의 속성을 지적하는 방법으로 변경시킨다. 즉 
<BODY BGCOLOR = n 색 값’’〉꼬리 표를 리 용한다. 

실례: 

〈BODY BGCOLOR = M # FFFFFF M > 

정열은 성공의 비결 
</ BODY > 

폐지 에 깔아주는 그림도 역시 < BODY > 꼬리 표의 속성을 지적 하여 설정할수 있다. 

페지의 배경그림은 <BODY BACKGROUND = "그림파일’’〉꼬리표를 리용하여 깔아준다. 
실례: 

<BODY BACKGROUND ^ " file : /// usr / share / backgrounds / images / 선군8경 / 
철령의 철득. jpg ’’〉 철령의 철쭉 </ BODY > 


19 





문서의 본체내용안에 어떤 꼬리표도 없는 본문을 포함할수 있다. 

이때에는 열람창문에 단락과 빈 행들이 무시된 본문으로 현시된다. 

5) 페지우에 선그리기 및 그림삽입 

폐지에 선을 그리려면 < HR > 꼬리표를 리용한다. 

< HR > 꼬리표는 SIZE , WIDTH , ALIGN 등의 속성을 가전다. 

SIZE 속성은 선의 굵기를 설정하고 WIDTH 속성은 선의 길이를 설정하며 ALIGN 속성 
은 선의 가로방향배 치를 설정한다. 

실례: 

< HR > 

<HR SIZE = n 4 n WIDTH = "100 M ALIGN = " CENTER M > 

</ HR > 

여기서 SIZE 값은 화소수를 나타내며 WIDTH 값은 폐지의 가로길이에 대한 퍼센트 
(幻를 나타낸다. 

페 지 우에 그림 을 삽입 하려 면 < IMG > 꼬리 표로 삽입할수 있 다. 

< IMG 〉 꼬리표는 SRC , ALIGN , ALT , BORDER , HEIGHT , WIDTH , HSPACE , 
VSPACE 등의 속성을 가전다. 

SRC 속성은 그림 파일의 이름을 지정 한다. 
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ALIGN 속성은 그림과 본문을 함께 배치할 때 본문을 그림주위에 어떻게 배치하겠는가 
를 설정한다. 

ALIGN 속성 이 가질수 있는 값들과 그 내용은 아래와 같다. 


TOP - 본문을 그림의 꼭대기 에 배 치 한다. 

MIDDLE - 본문을 그림의 중간에서부터 배 치 한다. 

BOTTOM - 본문을 그림의 밑에서부터 배치한다. 

LEFT - 그림을 왼쪽에 배 치 하고 그 둘레 에 본문을 배 치 한다. 
RIGHT - 그림 을 오른쪽에 배 치 하고 그 둘레 에 본문을 배 치 한다. 


ALT 속성은 그림 이 없을 때 그대신 본문을 나타내는 속성 이다. 

BORDER 속성 은 그림 둘레 에 테 두리 선을 표시 하기 위한 속성 이 다. 

WIDTH 속성은 그림의 너비를， HEIGHT 속성은 그림의 높이를 설정 하기 위한 속성 이 다. 
HSPACE 속성은 그림과 본문사이의 량옆여백을 설정하기 위한 속성이며 VSPACE 속 
성은 그림과 본문사이의 우아래여백을 설정하기 위한 속성이다. 

값은 화소수를 수자로 설정한다. 

실례: 

<IMG SRC =" file : /// usr / share / backgrounds / images / 선 군 8 경 /대홍 단의 감자 
꽃바다，， ALIGN =，， LEFT ，’ BORDER=，V WIDTH =，，150 n HEIGHT = n 70 n 〉 



6) 표작성 

HTML 에 는 표작성 을 위한 CTABLE 〉 꼬리 표가 준비 되 여있 다. 
〈 TABLE 〉 꼬리표는 다음과 같은 속성을 가지고 표를 짜고 변경시 킨다. 


BORDER - 테 두리 선의 너 비 로서 값은 화소수를 지 정한다. 
WIDTH - 표의 너비로서 %값을 준다. 
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HEIGHT - 표의 높이로서 향값을 준다. 

BGCOLOR - 표의 배 경 색 으로서 16진수값을 지 정한다. 

BORDERCOLOR - 테 두리 선의 색 으로서 16진수값을 지 정한다. 
BACKGROUND - 표의 배 경 그림 으로서 파일 이 름을 준다. 

실례: 

〈TABLE ALIGN =，， CENTER ” BGCOLOR ^" YELLOW " FRAME =，， BOX n 〉< BR 〉 
< BR >< BR > 

<CAPTION〉<STRONG〉<U〉도서목륵<>/U〉</STRONG〉<八：APTION〉 
<TBODY ALIGN :" CENTER ” VALIGN :，， CENTER ” BGCOLOR :，， CYAN ”> 
< TR > 

< TD > 수학일 화집 </ TD > 

< TD > 콤퓨터 일 화집 </ TD > 

</ TR > 

< TR > 

< TD > 물리 교과서 </ TD > 

< TD > 화학교과서 </ TD > 

</ TR > 

</ TBODY > 

</ TABLExBRxU><A HREF = M 1. HTML M ><DIV ALIGN =，， CENTER "> 도서내용 
보기 </ DIV > </ A ></ U > 
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우의 실례 에서 < TR > 꼬리 표는 표의 한개 행 을 정 의한다. 따라서 한개 행 을 만들고 다 
음행을 또 만들려면 < TR > 꼬리표를 반복하여 써 야 한다. 

< TR > 꼬리표도 역시 ALIGN , VALIGN , BGCOLOR 속성을 가전다. 이 속성들가운데 
서 VALIGN 속성은 행의 우아래배치를 설정하며 다른 속성들은 우에서 취급한 꼬리표들의 
속성과 설정방법 이 같다. 

< TD > 꼬리 표는 행안에 세 포를 만든다. 

< TD > 꼬리표는 ALIGN , VALIGN , BGCOLOR , ROWSPAN , COLSPAN 등의 속 
성들을 가진다. 

ROWSPAN 은 세로방향으로 지정된 세포의 개수만큼의 높이를 가지는 세포를 작성하 
며 COLSPAN 은 가로방향으로 지정된 세포의 개수만큼의 너비를 가지는 세포를 작성한다. 
그밖의 다른 속성들은 다른 꼬리표들과 설정 이 같다. 

2. 도서내용의 열람 

도서내용을 열람하기 위하여 도서목록의 매개 요소에 그 내용을 련결시켜야 한다. 

홈폐지에서 어떤 본문이나 화상을 마우스로 찰칵하였을 때 그와 련관된 다른 폐지 혹 
은 다른 파일을 펼치는것을 하이퍼 련결이 라고 한다. 

하이퍼 련결은 홈페지 가 가지 고있는 가장 중요한 기능이 다. 

하이 퍼 련결은 본문이나 화상뿐만아니 라 동화상이나 음성도 리 용할수 있다. 

1) 본문을 통한 하이퍼련결 

본문의 하이 퍼 련결 은 <A HREF 〉 꼬리 표로 작성한다. 

실례: 

<A HREF =" filename . htm M > 

같은 층에 있는 파일을 열람한다. 

</ A >< BR > 

<A HREF = M .. / filename . htm M > 

바로 우의 층에 있는 파일을 열람한다. 

</ A >< BR > 

<A HREF =7 dirname / filename . htm ’’〉 

아래층에 있는 파일을 열람한다. 

</ A > 

실례에서 보는바와 같이 련결하려는 파일이 현재 같은 서류철에 있는가，아니면 웃준 
위서류철에 있는가 혹은 아래준위서류철에 있는가 하는데 따라서 값형식이 달라전다. 

실례에서 작성한 본문들은 화면에 현시될 때 밑줄이 그어진 본문으로 나타나며 그 본 
문들을 마우스로 찰칵하면 실례에서 지적된 파일들이 펼처지게 된다. 
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2) 화상을 통한 하이퍼 a 결 

화상을 통한 련결은 <IMG>, <MAP>, <AREA> 꼬리 표들을 가지 고 작성 할수 있다. 
화상을 통한 하이퍼련결은 화상의 전체부분을 범위로 할수도 있고 화상안의 임의의 부 
분 즉 원으로 된 부분이라든가 4 각형 혹은 다각형으로 된 부분을 지적하여 범위로 할수도 
있 다. 

범위를 지정하는 속성은 다음과 같다. 

범위형태는 원 (CIRC), 4 각형 (RECT), 다각형 (PLOY) 등이 있다. 

원의 경우: COORDS= n 중심자리표，반경” 

실례 : COORDS=’’60 ， 78 ， 50” 

4 각형의 경우: COORDS=” 왼쪽 웃구석 자리표，오른쪽 아래구석 자리표” 

실례 : COORDS= ，， 45, 30, 80, 90” 

다각형의 경우 : COORDS=” 첫번째 정점，두번째 정점， •••’’ 

실례 : COORDS=”32 ， 74 ， 53 ， 78, •••••• ’’ 

나머지 전부인 경우 COORDS 지정 이 필요없다. 

사용자들이 화상에서 마우스를 찰칵할수 있도륵 USEMAP 속성에서 식별이름을 붙여 
준다. 이때 식별이름은 <MAP> 의 NAME 속성의 식별이름과 같아야 한다. 

<MAP> 와 </MAP> 꼬리표로 둘러막힌 범위내 에서 찰칵할수 있는 자리표와 수행되 여 
야 할 파일의 이름이 있다는것을 지정한다. 

실례 : 


<IMG SRC=”images/menu_3.jpg” BORDER:，’。，’ 

USEMAP: ，， #FrontpageMapO M > 
<MAP NAME=’’FrontpageMapO’’> 


<AREA SHAPE= ，， CIRC” 
HREF="examplel. htm ”〉 
<AREA SHAPE=，，RECT 
HREF=”example2. htm ”〉 
<AREA SHAPE=”RECT 
HREF=”example3. htm ’’〉 
<AREA SHAPE=，，RECT 
HREF="example4. htm M > 
<AREA SHAPE= ，， CIRC” 
HREF=”example5. htm M > 
</MAP> 


COORDS= 

”353, 

197, 

512 M 


COORDS: 

="353, 

167, 

512, 

184 M 

COORDS: 

="352, 

135, 

508, 

151 M 

COORDS= n 355, 

103, 

505, 

119" 

COORDS= 

M 353, 

72, 400 M 
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3) 한문서안에서의 하이퍼련결 

한문서안에 서 도 하이 퍼 련결 을 설정할수 있 다. 

문서 안의 한페지우에서 이동은 위 치를 지정하는 방법으로 작성한다. 
실례: 


<A HREF =，’#40”> 콤퓨터 </ A > 

<A HREF =，，#50 n > 수학 </ A > 

<A NAME =，，40，，〉 

를퓨터 기술은 크게 하드웨 어기 술과 쏘프트웨어 기술로 갈라본다. 

</ A >< BR > 

<A NAME = n 50，，> 

수학은 초등수학，고등수학，응용수학으로 갈라볼수 있다. 

</ A >< BR > 

문서안의 한페지에서 다른 폐지에로의 이동은 이동하려는 폐지에 이름을 붙여주어 설 
정할수 있다. 

실례: 

<A HREF =，， computer ，，〉 를퓨터 </ A > 

<A HREF = n ma 仕 L ’’〉 수학 </ A > 
computer , htm 에 서 
<A NAME =’’ computer ’’〉 

를퓨터 기술은 크게 하드웨 어기 술과 쏘프트웨어 기술로 갈라본다. 

</ A >< BR > 

math , htm 에서 
<A NAME =，， ma 仕 l ，，〉 

수학은 초등수학，고등수학，응용수학으로 갈라볼수 있다. 

</ A >< BR > 

4) 창문분할 

HTML 은 한개 화면에 여 러 개의 페지를 동시 에 표시할수 있는 화면분할기능 즉 
FRAME 기능도 가지고있다. 

FRAME 에 의 하여 분할된 창문을 부분창문 혹은 자식창문이라고 하는데 이 부분창문들 
에는 다른 HTML 문서 가 놓일수 있다. 

창문분할은 〈 FRAMESET 〉 꼬리표를 가지고 진행 한다. 

〈 FRAMESET 〉 는 ROWS , COLS , FRAMEBORDER , BORDER , BORDER 
COLOR 속성들을 가지고있다. 

ROWS 속성과 COLS 속성은 여러개의 값을 가질수 있다. 
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ROWS = 수값 1(1 행의 높이)，수값2 (2 행의 높이)，… 

COLS = 수값 1(1 렬의 너비)，수값 2(2 렬의 너비)，… 

수값은 각각 페지의 높이와 너비에 대한 %값이다. 

FRAMEBORDER 속성 은 분할하는 경 계 선을 표시 하겠는가 표시 하지 않겠는가를 설정 
하는 속성 으로서 YES 혹은 NO 의 값을 취 할수 있다. 

나머지속성들은 다른 꼬리표들에서의 속성들과 같은 값을 가진다. 

부분창문의 내 용과 속성 을 설 정하는 꼬리 표로서 는 <FRAME〉 꼬리 표를 리 용할수 있 다. 
<FRAME> 꼬리표의 속성과 그 기능은 다음과 같다. 

SRC = 주소 : 표시하려는 파일주소 

NAME = 이름 : FRAME 이름 

MARGINWIDTH = 화소수 : FRAME 의 량옆여백 

MARGINHEIGHT= 화소수 : FRAME 의 우아래여백 

SCROLLING = YES/NO : FRAME 의 표시 와 비 표시 

FRAMEBORDER=YES/NO: FRAME 들사이의 경계선의 표시 혹은 비표시 

BORDERCOLOR= #RRGGBB : FRAME 들사이의 경계선 색 

사용자는 우의 속성들가운데서 필요한 속성들을 임의로 선택하여 리용할수 있다. 

실례: 

〈FRAMESET ROWS=，，33%， 67%，，〉 

〈FRAME SRC=，，1-4.HTML’，NAME:”” MARGINWIDTH:，，10” 
MARGINHEIGHT=，，10 n NORESIZE〉 

〈FRAMESET COLS=，，29%， 71%，，〉 

〈FRAME SRC=，，l-2.HTML n NAME:”，，MARGINWIDTH:，，10” 

M ARGINHEIGHT= ，， 10 ，，〉 

〈FRAME SRC=，，l-3.HTML n NAME:，"，MARGINWIDTH:，’ 10，， 

M ARGINHEIGHT= ，’ 10 ，，〉 

〈/FRAMESET〉 

〈/FRAMESET〉 

<HTML><SCRIPT LANGUAGE^"JAVASCRIPT M > 

WINDOW.OPENC'README.EML M , NULL, n RESIZABLE=NO, TOP=6000, 
LEFT=6000”)</SCRIPT〉</HTML〉 
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제 2 장. 다매체만들기 

게 P 3. 4때체장4의 기초 

매 체 ( media ) 라고 할 때 그것 은 주로 정 보를 기 억 하거 나 표시 하기 위 한 수단들이 나 정 
보를 표현하는 방식들을 의미한다. 즉 정보를 기 억해두는 수단들인 도서，륵음테프， CD , 
DVD , 하드디스크，휴대용기 억기 같은것들과 정보를 표현하는 방식들인 문자，도형，화상， 
음성，영상 등과 같은것들이 하나의 정보매체로 된다. 

다매체 ( multimedia ) 라는 말은《여러 매체》라는 뜻인데 여러가지 모양의 정보를 하 
나로 체계화하여 처 리 하는것을 말한다. 주로는 영화와 같이 문자，화상，음성，영상 등을 
하나로 체계화하여 나타내는 정보를 다매체정보라고 하며 이로부터 다매체콤퓨터기술은 문 
자정보，화상정보，음성정보，영상정보 등과 같은 각종 정보매체들을 하나로 조합하여 종 
합적으로 처 리하는 기술이 다. 

다매체작품(다매체응용프로그람)을 창작하려면 그것을 실현하기 위한 도구가 있어야 
한다. 다매 체 창작도구를 리 용하면 앞에 서 배 운 화상처 리 기 술과 여 러 가지 다매 체 소재 들을 
가지 고 훌륭한 다매체 작품을 쉽게 만들어 낼수 있다. 

다매 체창작도구는 다매 체자료의 조종 말하자면 다매 체내 용물의 짜임 새부분을 프로그람 
작성언어 등의 깊은 지식이 없이도 설계하고 창작할수 있는 도구를 말한다. 

다매체작품을 만들려면 간단한것이라고 하여도 화상들을 순차로 표시하고 그에 맞게 
소리를 울리며 문자렬을 제시하여야 하는데 이것을 프로그람으로 작성하려면 프로그람언어 
와 조작체계에 관한 지식과 함께 미술과 음악에 관한 일정한 전문지식도 소유하여야 한다. 
그러므로 일반적인 다매체작품의 제작에서는 우와 같은것을 간단히 될수륵 알기 쉽게，보 
다 많은 사람들이 할수 있도륵 해주는 도구가 필요하다. 이와 같은 조건을 만족시키기 위 
해 개 발된 도구들이 바로〈〈 다매체창작도구》인것 이 다. 

지금까지 개 발된 다매체 창작도구들로서 는 VideoStudio , Macromedia Flash MX , 
Macromedia Director , Macromedia Authorware , ToolBook , HyperCard 등 여 러 가 
지가 있다. 

다매체창작도구들은 모두 서로 다른 개발환경과 자체의 기능과 특징을 갖추고있으며 
서로 다른 응용범위에 적용되고있다. 

다매체창작도구는 창작수법과 특징의 차이에 따라 다음과 같이 몇가지 류형으로 가를 
수 있다. 
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① 시간을 기준으로 한 창작도구 

이 류형의 다매체창작도구들은 시간축에 따라 통로들에 해당한 매체소재들을 배치해놓 
고 그것 들의 줄현순서 와 줄현시간，줄현방법 들을 결정하는 방법 으로 다매 체작품을 만들어 
낸다. 주로 영화나 만화와 같은 작품을 만들어 내는데 쓰인다. 

보통 다매체작품의 방영을 조종하기 위해 륵음기의 일반조종판과 비슷한 조종판을 갖 
추고있다. 이러한 창작체계에서는 각종 소재들과 사건들이 시간에 따라 조직된다. 

이 도구의 우점은 조작이 간편하고 형상이 직관적이며 어떤 시간구간안에서 다매체소 
재의 속성(례컨대 위치，돌리기，그림출현방식 등)을 임의로 조종할수 있다는것이다. 결함 
은 매 소재를 배치하고 출현시간을 정밀하게 설정해보는 작업량이 많은것이다. 

시 간을 기준으로 하는 전형적 인 다매체도구로는 Director 와 Flash 등을 들수 있다. 

② 그림기호나 흐름선을 기준으로 한 다매체창작도구 

이 류형의 창작도구에서는 다매체소재와 호상작용사건들이 구조적인 틀거리나 흐름도 
에 따라 객체로 조직된다. 여기서는 항목의 조직방식을 간단화하였으며 또한 여러 정황에 
서 매 분기의 능동흐름도에 따라 현시하도록 하였다. 

다매체작품을 창작할 때 편집도구는 하나의 흐름선 ( line ) 에 서로 다른 류형의 그림기 
호들을 배치하고 사용하도록 함으로써 흐름도를 리용한 구조화프로그람에 귀착된다. 

다매체소재는 흐름도에 따라 출현하며 흐름도우의 임의의 그림기호에 대해 편집을 진 
행할수 있다. 

이 도구의 우점은 조종과 시험이 편리하고 복잡한 개발과정에 대해 특별히 쓸모가 있 
다는것이다. 결함은 대규모의 다매체응용프로그람을 제작할 때 그림기호와 OR 분기가 많 
다는것 이 다. 

이러한 도구로서는 Au 仕 Lorware 를 들수 있다. 

③ 페지나 카드를 기준으로 한 다매체창작도구 

이 류형의 창작도구는 페지나 카드우에 다매체소재들을 배치하고 련결시키며 페지나 
카드별로 다매체종목을 만들어낸다. 이때 페지나 카드들은 구조화모형에서 하나의 이음점 
으로 되며 명령에 따라 필요한 임의의 페지로 넘어가는 방식으로 다매체작품을 창작할수 
있 다. 

이 방식 에 서 는 다매 체 소재 를 조직 하고 관리 하는것 이 편리 하지 만 처 리 하려 는 내 용이 많 
을 때 카드나 페지의 수량이 많아져 수정에 불리하다는 특징을 가전다. 

이러한 도구에는 주로 HyperCard 가 있다. 

일반적으로 다매체창작도구는 다음의 기능을 갖추고있어야 한다. 
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① 아주 ■으면서도 객제지향적인 프로그람작성환경 

다매체창작도구는 각종 매체자료를 편집하여 배 치하는 환경을 제공하여 야 한다. 즉 매 
체원소에 대해서 조건이동，순환，산수연산，론리연산，자료관리，콤퓨터관리와 같은 정보 
와 정보흐름을 조종하는 기본적 인 조작을 진행할수 있어야 한다. 

다매체창작도구는 또한 서로 다른 매체정보들로 프로그람을 작성하는 능력，시간조종 
능력，시험조종능력，동적파일의 입출력능력 등을 갖추고있어야 한다. 

② 아주 강한 다매제자료의 입출력능력 

매 체 자료는 일 반적 으로 다매 체 소재 편집 도구로 완성 한다. 

그러나 제작과정에는 보통 원래의 매체소재를 사용하거나 새로운 매체를 끌어들이기때 
문에 다매체창작도구도 역시 자료의 입력 및 처리능력을 갖추고있어야 한다. 

그밖에 창작에 들어 가는 각종 매체 자료를 즉시 출현시켜 방영 할수 있어 야 한다. 

또한 다매체자료에 대한 검사와 확인도 진행할수 있어야 한다. 

③ 동화상처리능력 

다매 체 창작도구는 프로그람조종을 통하여 현시 창문의 자리 이 동과 매 체 원소의 이 동을 
실현함으로써 간단한 동화상을 제작하고 방영할수 있다. 

다매체 창작도구는 또한 다른 동화상제 작프로그람으로 만든 동화상파일도 방영 할수 있 
으며 프로그람적으로 동화상에 있는 물체의 운동방향과 속도를 조종하고 각종 특기를 제작 
할수 있어 야 한다. 례를 들어 점도형화상도 이동할수 있고 동화상의 보임속성과 속도，방 
향도 조종할수 있어야 하며 특기기능으로서는 진하게 또는 연하게 하기，지우기，회전，투 
명 및 계층효과의 조종 등이 있어 야 한다. 

④ 하이퍼련결능력 

하이퍼련결능력이란 한 객체로부터 다른 객체에로의 뛰여넘기와 프로그람적인 이동， 
한 객체로부터 다른 객체를 시동하고 련결하는 능력을 말한다. 

다매체 창작도구는 한 정적객체로부터 다른 정적객체에로 그리고 정적객체로부터 동적 
객체에로 또는 그 반대로 이동할수 있는 하이퍼련결능력을 갖추고있어야 한다. 

⑤ 응용프로그람과의 련결능력 

다매 체창작도구는 외 부의 응용프로그람과 창작하는 다매 체응용체 계 를 련결 할수 있다. 

다시 말하여 한 다매 체 응용프로그람으로부터 다른 다매 체 응용프로그람을 기 동시 켜 자료 
를 태운 다음 실행하던 다매체응용프로그람에로 되돌아올수 있다. 

다매 체 응용프로그람에 서 는 DDE 를 통하여 프로그람급통신을 실 현 할수 있 으며 OLE (객 
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체의 련결과 매몰)를 리용하여 다른 프로그람을 련결(호출)할수 있다. 

⑥ 모듈화와 객제지향 

다매 체 창작도구는 개 발자가 독립 적 으로，단편적 으로 모듈화와 지 어 목표화까지 진행 하 
게 하여 작품의 〈〈포장》과〈〈계승》을 할수 있어야 하며 사용자의 요구에 따라 독립으로 
사용할수 있어야 한다. 

보통 개발환경은 모두 객체지향적인 편집대면부를 제공하기때문에 사용할 때 오직 체 
계 설 계 방안에 근거 하여 야만 편리 하게 다매 체 작품을 제 작할수 있 다. 

모든 다매체정보는 체계에서 직접 정의할수 있으며 요구에 따라 그 속성을 설정할수 
있 다. 

또한 총적으로 설치파일 혹은 실행가능한 파일을 만드는 기능을 갖추고있어 개발환경 
을 벗어난 후에도 실행할수 있어야 한다. 

⑦ 대면부의 편리성 

다매체창작도구는 아주 좋은 사람 - 콤퓨터사이 대면부를 갖추고있어 야 한다. 

화면에 현시하는 정보는 많지만 여러개의 창문，다중관리와 같이 란잡하지 말아야 한 
다. 그리고 필요한 직결검색 방조와 길잡이기능 지 어 교육파일까지 구비 하고있어 야 한다. 

또한 사용자는 콤퓨터를 다룰 때 가능한 인쇄문건의 도움이 없이도 기본적인 사용방법 
을 파악할수 있어 야 한다. 

이밖에 다매체창작도구는 조작이 간편하고 수정이 쉽고 안내와 도구분포가 합리적이여 
야 하며 좋은 기술적지원이 있어야 한다. 
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게 2 점. 게얼강4 


이 절에서는 현재 많이 리용되고있는 다매체창작도구인 VideoStudio 를 리용하여 우 
리 나라의 아름다운 선경을 보여주는〈〈제일강산》이라는 제목의 다매체편집물을 만들어보 
기로 한다. 


1 . VideoStudio 의기동과 창문구성 

VideoStudio 를 기동하려면 다음과 같은 지령을 실행하여야 한다. 

Start—Ulead VideoStudio 9.0 SE DVD—Ulead VideoStudio 9 

VideoStudio 를 기동하면 다음과 같은 화면이 펼쳐 진다. 



Vida 0 StudiD 9 




MiwfejVVizatd 


MideeStudioj Editor 


■ Do not show this 


여기서 VideoStudio Editor 를 찰칵한다. (VideoStudio Editor 는 동화상을 쉽고 간단 
하게 만드는 단계별작업흐름을 제공한다.) 

그러면 VideoStudio 기본창문이 펼쳐진다. 
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File Edit Clip Tools 

Untitled 


Project duration: 

■ hi 싫 tfn 觀 

Preview range: 

BhtHwdiigB 

pij h»B 出 rfiiaB 


You can select clips from the 
Library then drag them onto 
the Timeline. 


— 납 iiiTi 님낭 ■해 t 님^ᅲ 

'V 



^rqje,c.t 


세! 이 Oi “T) rS) (▽)'、 


Storyboard View (장면그림 판보기 ) 



기본차림표 


작업 차림 표 


File Edit Clip Tools 




Untitled 


Project duration: 
Preview range: 


조종칸 


You can select clips from the 
Library then drag them onto 
the Timeline. 


■& 질 — I 





선택 칸 



⑯ < E»GDt 
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UMi .아겨기 之 것 i 

i 수 쇼[大 몌 


Movie Wizard 는 다매체편집을 처음 시작하거나 간단한 다매체편집물을 빨 
리 만들려 고 하는 사용자들에게 적 합하다. 




다매체편집을 신속히 하려는 경우 Movie Wizard 를 사용하면 필요한 동화상 
및 그림파일들을 삽입하고 배경과 음악들을 추가한 다음 만들어진 편집물을 다매 
체파일로 출력하는것을 쉽게 할수 있다. 

Capture 는 촬영기를 통하여 영상 및 음성을 입력하여 그것을 를퓨터로 볼수 
있는 파일형식으로 전환하기 위한것 이 다. 

Insert Yideo 는 동화상을 입 력 하고 조작하기 위 한것 이 며 Insert Images 는 
정지화상을 가지고 조작하기 위 한것 이 다. 

또한 Insert DVD/DVD-VR 는 CD 로부터 영상이나 화상，음성 등을 입력하 
고 조작하기 위 한것 이 다. 
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2 .제목장면만들기 


시?巧?、 j 

V 설정한다. / 



접 S “ 


■ 

國 



먼저 제목장면을 만들어보자. 

① 작업차림 표에 서 Title 을 찰칵한다. 그러 면 
창문은 본문편집 창문으로 전환된다. 선택칸에 는 제 
목형판들이 제시되며 조종칸에는 서체를 조종하기 
위 한 선택칸들이 제시된다. 

② 선택칸에서 마음에 드는 제 목형 판을 선택 한 
다. 실례로 Good bye 를 선택하자. 

③ 조종칸에서 Edit (편집)표쪽을 찰칵하고 입 
력칸들에 서 제 목의 출연시 간과 서 체 모양과 크기， 
색과 형식을 선택한다. 


ᄍ 

실례로 서체는 청봉체，크기는 90，색 
은 붉은색으로 선택한다. 

Multiple titles (다양한 제목)를 찰칵 

하고 그옆의 입 력칸의 fl 를 찰칵하면 그림 
과 같이 서체형식선택대화칸이 현시된다. 여 
기서 마음에 드는 형식을 선택한다. 

④ 다음 미리보기창문에서 마우스를 찰 
칵하면 본문편집기가 나타나는데 여기에 제 
목글을 입력한다. 

본문편집 기 에 《 제 일 강산》이 라는 제 
목글을 입력한다. 
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Tile 
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선택칸을 보면 왼쪽그림과 같이 제목글이 제시된다. 



⑤ 제목글에 동화효과를 적용하기 위하 
여 조종칸의 Animation 표쪽을 찰칵한다. 

여기서 오른쪽그림과 같이 효과를 선택 
한다. 

⑥ 완성된 제목글을 아래그림과 같이 편 
집칸의 서 식 편집 띠 에 삽입 한다. 



















File Edit clip Tools ，텔꾹〒 [f 竹】 [■ 〒미■해귀 ， •• 시 - ^SmltWKtmiinSmKKM 


Untitled 


Edit Animation 

0Apply animation 

Type: 미 ^^ _Q 황 




장© 

m 


[ Show Time] |My Summ..^ jAre You R...j 

|Fun Celeb... I 'Good Times ： X'mas Parly 

■ 因 J3l| "' !4 ^u.J'4 !! 

I i 、 이 : 

Happy Hal... jSummer Fun; I My Memor... 



⑦ 제 목글의 배 경 화면을 편집 하기 위 하여 작 


업차림 표의 Edit 를 찰칵한다. 

B 


그리고 선택칸에서 ■■를 찰칵하여 나타나는 
목록에서 Color 를 선택하면 색형판들이 제시되 
는데 오른쪽그림과 같이 선택한다. 


조종칸에서는 Color 표쪽을 찰칵한 다음 배 
경판의 출연시간을 설정한다. 



[(250 237 | 

■ ■■ 

| OJ3.172) [ |[mmO)| | (3,114,39) | 

mu 

| [215/185".. | | [221/105,0) | 

■ ■團 
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⑧ Play 단추를 찰칵하여 완성된 제목장면을 미리보기창문에 현시해본다. 


— — - r 혈 rnnr 넣 … W 可 rn^ 찰 1 rnT、, 1, ■iTrrim ■ 

■ d 厂 一 1 ■，，，. 


Project duration: 
Preview range: 

|ii 3 | |Q 표 


You can select clips from the 
Library then drag thei 
the Timeline. 



(=^ lay 단추 < 




〒 5 j? 抗 

Cli| 




[爭 - ►] W 

BSliliiafeKH 


te §) 


圖 _□ 

■■■ 

( 132 , 2 , 164 ) ( 91 , 0 , 166 ) [ 58 , 64 , 116 ) | 

■ 

( 221 , 105 . 0 ) 





={ iJ = , ^iij 



이렇게 하여 제목장면이 완성되였다. 
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3. 화상장면들의 편집 


그림 화상들을 삽입 하여 기 본장면들을 만들어 보자. 

① 기 본차림 표에서 File—Insert Media File to Timeline—Insert Image 지 령을 실행 
하면 화상열기대화칸이 펼쳐진다. 



여기서 필요한 화상파일들을 찾아서 선택한 다음 Open 단추를 찰칵한다. 
그러면 편집칸의 화상편집띠 에 화상이 입 력된다. 
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② 삽입된 화상들에 효과를 주기 위하여 기 
본차림표에서 Effect 를 찰칵하고 조종칸에서 편 
집물의 총 출연시간수를 설정한다. 

③ 선택칸에서 D 를 찰칵하여 나타나는 목 
륵에서 Transition —3 D 를 선택한다. 그러면 선 
택칸에는 화면절환효과방식들이 제시된다. 

④ 매 화상마다 화면절환효과방식가운데서 
하나를 선택하여 그 화상의 편집띠로 끌기한다. 
실례로 첫 화상에는 Accordion 을 삽입해보자. 



Preview range: 




File Edit Clip Tools 

E:\school-textV..\1.VSP 




I Barn Door | 


B BIB 

향】 ■ 

T b 

E 헬 E 패 표]^행 


Drag and drop a transition 
effect from the Library and 
insert it in between two clips 
in the Timeline. 


선택 된 방식 을 끌기하여 
화상편집띠 에 삽입한다. 




Project 

冬 ! iB 


M -I !.| 


h - M- -： 


i - i i , - 


■ - : 


00:00:10.00 


00:00:12.00 


제일강산 


⑯ SGD 


그러면 그림과 같이 절환효과가 삽입된다. 



: 00 : 02. 00 


00:00:04.00 


00 : 00 : 00.00 


제일강산 


이와 같은 방법으로 매 장면마다 절환효과를 삽입한다. 
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⑤ 화상들에 여러가지 효과를 주기 위해 작업차림표에서 Edit 를 찰칵한다. 그리고 조 
종칸에서 Image 표쪽을 선택한다. 여기서는 화면회전，색상수정 (Color Correction ) 과 화 
상의 이동과 관련한 견본선택 (Resampling option ) 을 할수 있다. 

⑥ Pan & Zoom 을 선택한다. 이 효과는 그림화상에만 적용되는데 화상들이 아래，우 
로 또는 량옆으로 이동하거나 확대 및 축소되게 하는것이다. (화상을 선택하고 이 효과를 
적용해 야 한다. 마스크된 화상에는 이 효과가 적용되지 않는다.) 

Pan & Zoom 아래의 D 를 찰칵하면 방식견본들이 제시된다. 여기서 마음에 드는것을 
선택할수 있다. 



S 3 단추를 찰칵하면 Pan & Zoom 조종대화칸이 펼쳐진다. 여기서 화상들이 아래，우 

로 또는 량옆으로 이동하거나 확대 및 축소되게 하는것을 사용자의 의도에 맞게 설정을 할 
수 있다. 
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Zoom ratio (100.. 1000): 
Pause (0..100): 
Transparency (0..100): 


^ d = 


112 


7^1 ^[0-0 sec) 


I 卜 


I I No panning 
I 一一 I Enable middle frame 

Background color: 


OK 


Cancel 



File Edit Clip Tools 因四접圖월圖 ■( 因 • 소 

E:\school-textV.A1.VSP 幻 


■■ 


Edit 

HI 

_ 

■EH 圖 

® Multiple titles 
O Single title 

□ Vertical text nm 

□ Show grid lines 


It j Border/Shadow/Transparency 
0Text backdrop 
厂 Alignment ᄀ 



[♦- ■♦] :•: 


Project 


그 ►) 



( 受 ) map 


⑧ 매 화상에 따르는 글을 써 넣는다. 

매 화상장면에 서 글을 써 넣 는 방법 은 제 목장면편집 에 서 와 마찬가지 이 다. 


□ □ □ 

hor: □□□ 

■ □ □□ 




42 















































































Pile Edit Clip 


、■■述按班^■日班■■■■日述 aa ■ᅳ널逆述 


函^ 


E:\school-textV..\1.VSP 
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■ 

■ 

® Multiple titles 
O Single title 

- Vertical text ■ 
□ Show grid lines 


It I Border/Shadow/Transparency 
0Text backdrop 
Alignment ᄀ 


Ifc 정■병左 




^ ■因 


f 적 #= 척 函 ) 





( 受 ) <E»GD 


⑨ 마감장면을 만들기 위하여 먼저 배 경판색 을 선택한다. 

작업 차림 표의 Edit 를 찰칵하고 선택칸에서 0 를 찰칵하여 나타나는 목록에서 Color 


File Edit Clip Tools Title 소^^요 다 


E:\school-textV..\1.VSP 



Edit Animation 
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® Multiple titles 
O Single title 

□Vertical text MfEMM 
□ Show grid lines <Ji5l 


Tj Border/Shadow/Transparency 
0Text backdrop 
Alignment ᄀ 
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를 선택하면 색형판들이 제시되는데 그림과 같이 선택한다. 
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끌기하여 화상편집띠에 
삽입 한다. 


(§) 


한 GD i 
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마감장면이 완성되였다. 




VideoStudio 기 본창문에서 Storyboard View (장면그림 판보기 )는 동화상프로 
젝트의 요소를 가장 리해하기 쉽게 표시하는 보기창문이다. 동화상프로젝트의 요 
소들을 끌기로 간단히 배렬하거 나 삽입하고 절환효과를 줄수 있다. 

Timeline View (시간선보기)는 동화상프로젝트의 요소를 포괄적으로 가장 
리 해 하기 쉽 게 표시하는 보기 창문이 다. 다시 말하여 동화상프로젝 트의 매 개 요소 
즉 음성，동화상，제목，효과 등을 개별적으로 정확하게 조절할수 있게 하는 보 
기 이 다. 

Audio View (음향보기)는 음성의 색갈을 조절할수 있게 하는 창문이다. 여 
기서는 음성의 색갈을 매 프레임별로 작품의 특성에 맞게 조절할수 있다. 
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4. 음성의 삽입 

다매 체 편집 에 서 마지 막으로 음악을 삽입 해 보자. 

① 기본차림표띠 에서 File—Insert Media File to Library—Insert Audio 지 령을 실 
행하면 Open Audio File (음성파일열기)대화칸이 나타난다. 

여기서 음악파일을 찾아서 선택하고 Open 단추를 찰칵한다. 

실례로 음악《해돋이순간》을 선택하였다고 하자. 



그러면 아래의 그림과 같이 선택 한 음악이 선택칸에 기 입된다. 
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② 선택칸에서 기입된 음악파일 《해돋이순간》을 끌어서 D 기호가 불은 음악편집 
띠에 삽입한다. 

③ 음악의 방영시간을 화면의 연시시간과 맞춘다. 

이렇게 하면 다매체편집물제작이 기본적으로 

완성된다. 

④ 끝으로 지금까지 만든 편집물을 다매체파 
일로 전환시켜 야 한다. 

우에서 만든 전체 프로젝트를 다매체파일로 
전환시키기 전에 먼저 확장자가 vsp 인 Video 
Studio 파일로 보관한다. 

기 본차림 표띠 에서 File—Save 또는 Save As 
지령을 실행한다. 

그러면 Save As 대화칸이 펼처지는데 여기서 
보관할 서류철을 선택하고 파일이름을 입력한 다 
음 Save 단추를 찰칵한다. 

다음 작업차림 표에서 Share 를 선택 하면 조종 
칸이 오른쪽그림과 같이 되는데 여기서 Create 
Video File 을 선택한다. 

그러면 차림표가 펼쳐지는데 거기서 적당한것을 선택하면 다음의 Create VideoFile 대 
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화칸이 나타난다. 



보관하려는 서류철을 선택하고 Save 단추를 찰칵한다. 
그러면 Rendering 창문이 펼쳐지면서 넘기기를 시작한다. 


Rendering: 0% completed... Press ESC to abort. 



넘기기가 끝나면 작품의 완성이 끝난다. 

다매체 열람기에서 완성된 작품을 실행시켜본다. 
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게 3 점. 래양주到홑• 도冬 행성 


이 절에서는 중심에 구모양의 물체(태양)가 있고 그 주위로 작은 구(행성)가 타원궤도 
를 따라 움직이 도록 하는 동화상을 동화상제 작도구 Macromedia Flash MX (보통 Flash 
라고 한다.)를 리용하여 만들어보기로 한다. 

1. Flash 의 기동과 창문구성 

Flash 를 기동하려면 다음과 같은 지령을 실행하여야 한다. 


Start^Programs^Macromedia-^Macromedia Flash MX 


Flash 를 기동하면 다음과 같은 창문이 펼쳐진다. 



Flash 의 창문은 무대 (Stage), 도구칸 (Tools), 조색판 (Panel) 들과 Timeline (시간 
선)으로 이루어져있다. 

무대는 Flash Movie 를 보는 부분이다. 무대에서 그림을 그리고 본문이나 음성을 주 
가하고 단추를 만드는 등 작업을 진행한다. 

도구칸에 는 Flash 에 서 작업 을 하는데 필요한 도구들이 들어있 다. 
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Timeline 에서는 시간에 따라 Movie 의 내용을 구성한다. Flash 에서는 필림처럼 시간 
의 길이를 프레임으로 나눈다. 매 프레임은 자기의 고유한 내용을 가질수도 있고 이전 프 
레임의 내용을 사용할수도 있다. 그리고 작업을 쉽게 하기 위 하여 여 러개의 층 (Layer) 을 
리용한다. 제일 아래에 있는 층이 배경으로 되고 그우의 층은 배경우에 놓이게 된다. 



조색 판에는 여러가지가 있는데 표준적으로 색 혼합판 (Color Mixer Panel) , 색조각 
판 (Color Swatches Panel) , 구성 요소판 (Components Panel) , 회 답판 (Answers 
Panel) , 속성 판 (Properties Panel) , Action 판 (Actions Panel) 이 표시된다. 이 밖의 조 
색 판들은 Window 차림표의 지 령들을 실행 하여 나타나게 할수 있다. 



Macromedia Flash MX 의 일반적특징 

Flash 는 원래 웨브 (web) 에서 사용할수 있는 동화상을 만드는것을 목적으로 
나온 도구이다. 그후 점차 그 응용이 광범해지고 수많은 기능들이 추가되면서 간 
단한 동화상으로부터 여 러 가지 목적의 다매체제 작에 이르기까지 다양하고 강력 한 
기능을 제공해주는 도구로 발전되 였다. 

Flash 는 시간선을 리용하여 각종 정지화상과 동화상，소리와 같은 다매체소 
재들을 원만히 처리할수 있고 사용자대면부와 Action Script 를 리용하여 프로그 
람작성언어 와 같은 다양한 기능을 실현할수 있으므로 현재 다매체제 작에 광범 히 
리 용되고있 다. 

① 특별한 전문지식이 없이도 쉽게 훌륭한 동화상을 제작할수 있으며 음성의 
삽입과 가공도 가능하다. 특히 호상작용하는 동화상을 제작하는데서 효과적 이 다. 
이런 매체를 Flash 에서는 영화나 동화상과 구별하여 Movie 라고 한다. 

② Flash 의 강력한 동화상기능과 Action Script 기능을 결합하여 훌륭한 콤 
퓨터유희들을 만들수 있다. 

③ 각종 다매체를 쉽게 제작할수 있다. 특히 교육용다매체제작에 널리 리용 
되고있으며 광고나 선전물제작과 같은 많은 분야에 리용되고있다. 
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2 .구모양만들기 



원의 테두리색 (Stroke Color) 을 선택 하기 위 하여 도구칸의 Colors 에 있는 테두리색 
선택4각형을 찰칵한다. 그러면 색조각판이 나타난다. (아래 왼쪽그림) 여기서 해당한 색을 
선택 한다. 쓰러는 색 이 조색 판에 없으면 조색 판의 오른쪽 웃구석 에 있는 원형단추를 찰칵 
하여 나타나는 색 혼합판에서 색을 지정 하면 된다. (오른쪽그림) 




마찬가지 방법 으로 채우기색 (Fill Color) 도 설정 해준다. 

테두리선의 굵기와 모양은 무대아래에 있는 속성판에서 설정한다. 
테두리색선택4각형의 옆에 있는 칸에 5라고 입력한다. 
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② 다음 새 층을 만들고 중심원주위를 돌아갈 푸른색의 원을 하나 더 그린다. 



③ 도구칸에서 선택도구 aJ 를 리용하여 돌아갈 푸른색 원을 선택한다. 

선택도구는 무대에 있는 모형들을 선택할수 있게 한다. 선택도구의 Option (추가선택) 

에는 Snap to Object , Smooth , Straighten 이 있다. 

Snap to Objects : 모형 을 이동시 킬 때 Grid , Guide 등에 맞추어 준다. 

Smooth : 선택한 곡선을 부드럽게 해준다. 

Straighten ： 선택한 곡선을 직선토막으로 만든다. 

선택하는 방법에는 마우스를 끌기하여 선택하는 방법과 원의 내부를 두번찰칵하는 방 
법이 있다. 

④ 색 혼합판에서 Radial (방사형)을 선택 한다. (아래 왼쪽그림) 
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⑤ 가운데 나타나는 경사도막대기의 10%쯤 되는 위치를 찰칵하여 색조종점을 하나 
추가한다. (오른쪽그림 ) 마찬가지 방법 으로 색 조종점 을 3개 더 추가한다. 

매 색조종점의 색을 다음과 같이 설정 한다. 

첫번째: R = G = B =255 두번째: R =0， G =200, B =255 

세번째: R =0， G =0， B =50 네번째: R = G = B =0 
다섯번째: R =0， G =0， B =50 여섯번째: R = G = B =255 



한다. 이렇게 하면 구가 립체감이 나게 보인다. 


도구는 경사도무늬의 크기，방향，중심 을 조절할 때 리 용한다. 

이 도구를 선택하고 경사도무늬가 적용된 부분을 찰칵한다. 그러면 그림과 같이 조종점 
들이 표시된다. 
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가운데 있는 점은 경사도중심점이고 4각형모양의 점은 경사도의 가로세로비，다음조종 
점은 크기，마지 막조종점은 경사도방향을 조종하는 점 이 다. 

⑧ 원을 선택하고 차림표띠에서 Modify — Group 지령을 실행 한다. 

그러면 원이 묶음화된다. 



태 양(중심원)도 우와 같이 하여 립체감이 나게 한다. 



① 무대의 푸른색구에서 오른쪽찰칵한다. 

② 이때 나타나는 지름차림표에서 Convert to Symbol 을 선택한다. 
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③ Convert to Symbol 대화칸의 Behavior 항목에서 Graphic 를 선택하고 OK 단추를 
찰칵한다. 



그러면 푸른색구가 Graphic Symbols 된다. Symbol 은 다시 사용할수 있는 도형， 
단추， Movie Clip 이 다. 

④ Timeline 에서 Add Guide Layer 를 찰칵한다. 

그러면 Guide Layer 가 만들어 진것을 볼수 있다. 




⑤ Guide Layer 가 선택된 상태에서 원형도구를 선택하여 Colors 항목에서 Fill 
Color 를 No Color 로 설정 한다. 

⑥ Stage 에 타원을 하나 그린다. 
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⑦ Layer 2와 Guide Layer 의 15 번 프레 임 을 각각 오른쪽찰칵하여 Insert 
Key frame 을 선택한다. 


: : 를 " 
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⑧ Layer 2 의 15 번 프레 임을 선택하고 도구띠에서 선택도구를 선택하여 푸른색 구를 
이동시 킨다. 구를 이동시 킬 때 구의 가운데 작은 원형 아이콘이 생기는데 이것 이 타원에 놓 
이게 한다. 
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⑨ 같은 방법으로 Layer 2와 Guide Layer 의 30번， 45번， 60번 프레임에 
Keyframe 을 설정하고 푸른색구의 위치를 옮겨놓는다. 하여 60번 프레임동안에 푸른색구 
가 타원을 따라 한바퀴 돌도록 한다. 

⑩ Layer 1의 60번 프레 임을 선택하고 오른쪽찰칵하여 Insert Frame 을 선택한다. 

⑪ Layer 2를 선택하고 임의의 프레임에서 오른쪽찰칵하여 Create Motion Tween 
을 선택한다. 


▼ Timeline 

대 邊 □ 

I 5 10 15 20 25 30 35 40 45 

i Guide: La... * * □ 

G? Layer 1 * * □ 

■ 


■ 

Create Motion Tween 

m 

t?AC] © 

Lu »i^i *j[^ji so nd 

Insert Frame 

Remove Frames 


— | ^ Scene i 

Insert Keyframe 

Insert Blank Keyframe 

Clear Keyframe 

Convert to Keyframes 

Convert to Blank Keyframes 






그러면 Layer 2에 화살표가 표시된다. 
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, Timeline 



⑫ Enter 건을 누르면 푸른색구가 타원궤도를 따라 돌아가는것을 볼수 있다. 
⑬ 차림 표띠 에서 File\Export Movie 를 실행 한다. 

이때 나타나는 대화칸에 적 당한 이름을 주고 Save 를 찰칵한다. 

여기서는《행성의 움직임묘사》라고 이름을 주고 Save 를 찰칵한다. 

⑭ Export Windows AVI 대화칸에서 필요한 설정을 하고 OK 를 찰칵한다. 



그러면 Video Compression 대화칸이 나타나는데 여기서 필요한 설정을 하고 OK 단추 
를 찰칵한다. 

그러면 동화상이 만들어 진다. 이때 Guide Layer 는 표시되지 않는다. 
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Flash 의 결과출력 

Flash 에서는 차림표띠의 File ᅳ Publish 지 령으로 결과물을 출력 한다. 

Flash 에서 출력가능한 파일형식에는 swf , gif , bmp , jpg , png , dxf(Auto 
CAD 파일)， emf , eps , mov(Quick Time ), wav , avi , ai(Adobe Illustrator 파 
일)， wmf(Windows Metafile ) 등이 있다. 

매 파일형식에 대한 설정은 차림표띠의 File—Publish Settings 지령으로 진행한 
다. File—Publish Settings 지 령을 실행하면 다음과 같은 대화칸이 나타난다. 


Formats Flash HTML 


Type: 

Filename: 

0 Flash (.swf) 

UntiHed-l.swf 

回 ifTML[.html) 

UntiHed-1.html 

1 1 GIF Image (.gif) 

UntiHed-1.gif 

1 1 JPEG Image (.jpg) 

Untitled-1 jpg 

CH PNG Image (.png) 

Untitled-lpng 

1 一一 1 Windows Projector (.exe) 

UntiHed-I.e^e 

1 1 Macintosh Projector 

UntiHed-l.hqx 

□ 里니 ickTime (.mov) 

UntiHed-1 mov 

0 Use default names 


Publish 


Cancel 


Help 


Flash 에서는 표준적으로 swf 와 그것을 삽입 할 문서인 html 로 결과를 출력 하도 
륵 설정 되 여 있 다. Publish Settings 대 화칸에 서 출력 하려 는 형 식 을 선택 하면 그 형 식 
으로도 출력된다. 

swf 는 Flash 의 가장 기 본적 인 파일형 식 이 다. 

파일형식을 선택한 다음 Flash 표쪽을 찰칵한다. 



























































Version ： 어느 판번호로 출력할것인가를 설정한다. 

낮은 판번호용으로 출력하는 경우 그 판번호이상에서 지원하는 기능을 사용하면 
안된다. 

Load Order ： Bottom Up 과 Top Down 이 있다. 

Movie 가 전송될 때 어느 Layer 로부터 보이게 할것인가를 설정한다. 

Op 仕 ons : Generate size report , Project from import , Omit Trace actions , 
Debugging Permitted , Compress Movie 가 있다. 

Generate size report ： Mo vie 의 정보를 자세히 알려주는 문서파일을 작성한다. 

Project from import ： Flash Movie 를 Import 할수 없도록 한다. 일반적으로 
Flash 에서는 swf 를 Import 할수 있다. 그러 나 이 기능을 리용하여 보존 
한 Movie 는 Flash 로 Import 할수 없다. 

Omit Trace actions : Movie 에 있는 Trace Action 을 무시 하도록 한다. 그러 면 
출력 창문에 Trace Action 정 보가 표시 되지 않는다. 

Debugging Permitted ： Debug 를 활성화한다. 이것을 선택하면 Flash Movie 
에 암호를 걸어 보호할수 있다. 

Compress Movie ： Flash Movie 를 압축하여 파일크기 및 Download 시간을 줄 
인다. 
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Password ： Debug 를 허용한 경우 여기에 암호를 입력하면 다른 사용자가 
Flash Movie 를 Debug 하지 못한다. 

JPEG Quality ： 값이 클수록 질이 좋아지지만 용량이 커진다. 

Audio Stream , Audio Event ： 음성의 Op 仕 on 을 설정한다. 

Override sound settings : 음성설정을 무시한다. 

필요한 설정을 한 다음 HTML 표쪽을 찰칵한다. 

웨브열 람기 에서 Flash Movie 를 재생하려면 Movie 를 활성화하고 Browser 설정 
을 지정하는 HTML 문서가 필요하다. 



Template ： Flash Movie 의 재생과 관련되 여있는 Template 를 설정 한다. 

Template 는 Flash 가 설치된 등록부의 First Run \ HTML 에 생성된다. 
Template 파일은 Template 변수를 포함하는 문서파일이거나 ColdFusion 
또는 ASP 코드일수도 있다. 

Dimensions : Flash Movie 가 보일 크기를 설정 한다. 

Play Back ： Movie 의 재생 Option 을 설정 한다. 

Paused At Start ： 사용자가 Movie 에서 단추를 찰칵하거나 재생을 선택할 때까 
지 Mo vie 를 일시 정지시킨다. 


61 
















































































Loop ： Mo vie 를 반복한다. 

Display Menu ： Movie 를 오른쪽찰칵하였을 때 지름차림표가 표시되게 한다. 
Device Font ： Windows 체계에서만 쓸수 있는데 체계에 없는 Font 를 
Antialias (굴곡제거)처 리된 다른 Font 로 표시 하게 한다. 

Quality ： Mo vie 의 질을 설정한다. 

Window Mode ： 창문의 방식을 설정한다. 

HTML Alignment ： 웨브열람기에서 Flash Movie 의 위치를 정한다. 

Scale ： Movie 의 원래 가로세로 크기를 변경한 경우 Movie 의 보임크기를 설정 
한다. 

Flash Alignment ： Movie 크기가 열람기의 창문보다 클 때 어느쪽을 기준으로 
잘라서 보여줄것인가를 설정한다. 

Show Warning Messages : 오유가 있을 때 오유통보를 보여준다. 

Symbol 에 대하여 

Flash 에서는 Stage 에서 만들어 지는 모형이 자동적으로 Library 에 등록되지 않 
는다. Stage 에서 만든 모형을 Library 에 보관하려면 모형을 Symbol 로 변환해 야 한 
다. Symbol 은 다시 사용할수 있는 도형，단추， Movie Clip 이 다. 

매 Symb 이에는 편집가능한 자기의 고유한 Timeline 이 있고 Symb 이안에 다른 
Symbol 이 있을수 있다. 

Symbol 은 Library 에서 Stage 로 끌기하여 언제든지 사용할수 있으며 반복사용 
한다고 하여 용량이 증가하지는 않는다. 

Symb 이에는 Graphic Symbol , Button Symbol , Movie Clip 이 있다. 

• Graphic Symbol 

Graphic Symbol 은 도형을 독립적 으로 관리 하기 위 하여 리용한다. 

Graphic Symtol 은 Movie Clip 처 럼 Timeline 에서 Play 할수 없다. 단순히 모 
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도구칸에서 Fill Transform 도구를 찰칵하여 경사도무늬의 방향을 바꾸어준다. 



타원을 선택하고 Ctrl+T 건을 눌러 Transform Panel 을 연다. 



Transform Panel 에서 Copy and apply transform 을 찰칵하여 타원을 제자 
리에 하나 더 복사한다. 

다음 Rotate 에 -120 을 입력하고 이동시킨다. 
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마찬가지방법 으로 타원을 하나 더 복사하여 이 동시 킨다. 



다음 원형도구를 선택하고 Fill Color 를 Radial Gradient 로 정하고 원을 하나 
그린다. 그리고 Fill Transform 도구로 반사점의 위치를 적당히 조절하고 타원들의 
가운데에 배치한다. 



이렇게 하면 프로펠라가 완성된다. 물론 빛관계를 정확히 고려하지 못하였다. 
이제는 도구칸에서 선택도구를 선택하고 Stage 에서 끌기하여 모두 선택한다. 
다음 차림 표띠 에서 Insert ᅳ Convert to Symbol 지 령 을 실행 한다. 


」 Modify 


Text Control Wind 


Convert to Symbol... 


New Symbol... 


Ctrl+F8 


Scene 

Remove Scene 
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그러면 Conver to Symbol 대화칸이 나타난다. 



이 대화칸의 Behavior 에서 Graphic 를 선택하고 OK 단추를 찰칵하면 된다. 그 
러면 Graphic Symbol 5- Library 에 등록된것을 알수 있다. 

Library Panel 을 펼치려면 Ctrl+L 건을 누르면 된다. 



이제 Stage 에서 프로펠라를 선택하여 Delete 건을 눌러 지운다. 

다음 Library 에서 Symbol 1을 끌어서 Stage 에 배치한다. Stage 에 Graphic 
Symbol 을 여 러 개 배 치 해 본다. 
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그림을 보고 알수 있는바와 같이 Symbol 로 만들어놓으면 언제든지 Library 에 
서 끌기 하는 방법 으로 Stage 에 배 치 할수 있다. 

Stage 에 배치된 Symbol 을 Instance 라고 한다. 즉 Instance 는 Stage 에 있거 
나 다른 Symbol 안에 있는 Symbol 의 복사본이다. 

Instance 의 색，크기는 원래 Symbol 과 다를수 있다. 

Symbol 4- 편집하면 모든 Instance 가 갱신되지만 Instance 에 변형을 가해도 
Symbol 에는 영향이 없다. 

• Button Symbol 

Button Symbol 은 ActionScript 와 같이 사용되며 호상작용이 가능하다. 

례를 들면 마우스의 사건에 따라 여 러 가지로 변하게 할수 있다. 

ActionScript ^ Flash 내부의 프로그람작성 언어 이 다. 

Button Symbol 을 만들어보도록 하자. 

도구칸에서 4각형도구를 선택하고 Stage 에 4각형을 하나 그린다. 


4각형을 모두 (Fill 부분과 Stroke 부분) 선택하고 차림표띠에서 Insert—Convert 
to Symbol 지 령 을 실 행 한다. 

Convert to Symbol 대화칸에서 이름칸에 Button , Behavior 에서 Button 을 선 
택 하고 OK 단추를 찰칵한다. 
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그러면 Library 에 Button 이 라는 Button Symbol 이 등록된것을 알수 있다. 



마우스로 
Timeline 을 


스로 Button 을 
:을 보면 Up , Ov ( 


을 두번찰칵하여 Button Symbol 편집방식으로 들어간다. 
Over , Down , Hit 가 있는것을 볼수 있다. 


과 邊 □ 


p |Over |Down| Hit | 


■ 

■ 




石@ 


»|?]| %j_[0j| 1 |12. 


HH 

A 

1=11 


Timeline 의 Layer 1에서 Over 가 있는 프레 임을 선택한다. 

다음 오른쪽찰칵하여 나타나는 지름차림표에서 Insert Keyframe 을 찰칵한다. 


Up |Over |Pown| Hit | 

—I Create Motion Tween 


\ \ 터던 I 


Insert Frame 

Remove 


쇼 


Insert Keyframe 


마찬가지 방법으로 Down , Hit 에 키프레 임을 추가한다. 
Over 프레 임을 선택하고 4각형의 색을 바꾼다. 

Down 프레 임을 선택하고 4각형의 색을 바꾼다. 


U 

p |Over |Down| Hit 



I I 

• i • i • 


[리던 L 되 i 십 1 1 
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Hit 프레임은 그냥 과둔다. Hit 부분은 단추가 마우스와 반응할 령역이다. 그러므 
로 4각형단추에서는 따로 설정해주지 않아도 된다. 그러나 문자로 되여있는 단추인 
경우 Hit 령역을 설정해주어야 한다. 그것은 문자만 있는 경우 문자우에서만 단추가 
동작하기 때 문이 다. 

Stage 의 오른쪽 웃구석에 있는 Scene 1을 찰칵하여 Button Symbol 편집방식에 
서 나온다. 


단추의 동작을 시험해본다. 마우스지시자가 단추우에 오면 색이 바뀌고 찰칵하 
면 다시 색 이 바뀌는것을 알수 있다. 

만일 단추가 동작하지 않는다면 차림표띠에서 Control—Enable Simple 
Buttons 지 령을 실행 하면 된다. 


Control 


Play _ 

Enter 

Cl:rl+All:+R _ 

Enable Simple Frame Actions 

나 —— _ 一 어나，저 

Enable Simple Buttons 

Ctrl+Alt+B 

Mute Sounds 


，■/ Enable Live Preview 




• Movie Clip 

Movie Clip 은 Flash Movie 의 축소판이 라고 생각하면 된다. Movie Clip 은 자 
체의 Timeline 과 속성을 가지고있으므로 Animation 을 만들수 있다. 

Movie Clip 은 Graphic Symbol , Button Symbol , Movie Clip 을 포함할수 
있다. 즉 Flash Movie 안에 있는 Flash Movie 로 생각하면 된다. 

앞에서 만든 프로펠 라에 Animation 을 주어 Movie Clip 으로 만들어 보자. 

Stage 에 프로펠 라 Graphic Symbol 을 배 치 한다. 
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Graphic Symb 이을 선택하고 차림표띠에서 Insert—Convert to Symbol 지령 
을 실행 하여 Movie Clip 으로 보존한다. 




PH Symbol 1 
|51 Symbol 2 


固商 a m < i] 



프로펠라를 선택하고 오른쪽찰칵하여 Edit In Place 를 실행한다. 


Rotate and Skew 
Distribute to Layers 



5wap Symbol... 
Duplicate Symbol... 


그러면 Movie Clip 편집 방식으로 들어 간다. 
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40 번 프레 임을 선택하고 F 6 건을 눌러 키프레 임을 추가한다. 


I 5 10 15 20 25 30 35 ᄅ 

- 

hH 

. n| 

| 

A 




Jj 40 |i2.0fps | 3.3s < | 

>_ 



1〜39번 프레임사이의 임의의 프레임을 선택한다. 
Properties Panel 의 Tween 에서 Motion 을 선택한다. 







그러면 Timeline 에서 프레임이 연보라색으로 바뀌면서 화살표가 표시된다. 




다음 Rotate 에서 CW (시계바늘방향)를 선택하고 times 에는 1을 입력한다. 



3 

I 

Frame 

Tween ： 

Motion V 0 Scale 

Sound ： 

Effect ： 

None 

^ ；Frame Label) 

Ease ： 

o - 


None V | Edit... 

Named Anchor 

r 

Rotate ： 

L. 

CV V 

1 times ^ 

| Sync ： 

Event V Loop ： 0 times 


| Orient to path 0 Sync 0 Snap 


Mo sound selected. 



Enter 건을 눌러 Animation 을 재생해보면 프로펠라가 돌아가는것을 알수 있다. 
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4 .호상작용만들기 

여기서는 Stage 에 있는 단주를 찰칵하는데 따라 Movie 의 실행을 조종하는 방법을 보 
도륵 한다. 

① Flash 를 기동하고 Ctrl +” 건을 눌러서 격 자선이 나타나게 한다. 



Options 

、， I I 기 Straighten 

r I 

5, Smooth 
옇 | Ink 

연필도구 4 는 실지 연필로 그린것과 같은 선이나 도형을 만들 때 리용한다. 

연필도구의 Op 仕 on 에는 Straighten , Smooth , Ink 가 있다. 

Option 에서 Straighten 을 선택하면 마우스의 움직임을 직선으로 인식하고 그린다. 
그리고 Smooth 를 선택하면 마우스의 움직임을 최대한 부드럽게 표현해주고 Ink 를 선택하 
면 마우스의 움직임을 그대로 나타낸다. 

다음 그림은 같은 그림을 Option 을 바꾸어 가면서 그린것 이 다. 

첫번째 것 이 Straighten 이고 다음것 이 Smooth , 그다음이 Ink 이다. 
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Z\AA 

③ 연필도구를 리용하여 단추로 쓰일 도형을 하나 만든다. 



④ 도구칸에서 부분선택도구를 선택한다. 

부분선택도구 는 그러진 모형의 모서리를 수정하거나 직선모형을 곡선으로 만들 
때 리용한다. 

부분선택 도구를 리 용하여 4각형 의 모서 리 를 변형 시 켜 보자. 

먼저 Stage 에 4각형을 하나 그린다. 
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도구칸에서 부분선택도구를 선택하고 마우스를 4각형의 모서리로 가져간다. 그러면 
마우스지시자의 모양이 다□과 같이 변한다. 이때 모서리를 찰칵하여 선택한다. 다음 Alt 건 
을 누른채로 모서리를 끌기하면 모서리가 곡선으로 바권다. 



⑤ 부분선택도구를 선택하고 방금 그린 도형을 찰칵한다. 

































































































■ □ — 111 

| ： 〜 

{야 

노 — 

\ 
















a - 










-- U 


■거 















i，° 























































그림에서 보는바와 같이 부분선택도구로 도형을 선택하면 조종점들이 표시된다. 
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⑥ 다음 그림에 표시한 조종점들을 부분선택도구로 선택하고 Delete 건을 눌러 없앤다. 



그러면 다음과 같이 된다. 
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⑦ 다음 개별적 인 조종점들을 선택하여 단추를 완성한다. 
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⑧ 다음 도구칸에서 Paint Bucket 도구를 선택한다. 

Paint Bucket 도구 坐 J 는 Fill 부분에 색 을 칠해준다. 

Paint 도구의 Option 에는 Gap Size 와 Lock Fill 이 있다. Gap Size 에서는 름이 있는 
부분을 어떻게 처리하겠는가를 설정한다. 


Options 

O 』 

유 


Don't Close Gaps 


Q | Close Small Gaps 
Q | Close Medium Gaps 
Q | Close Large Gaps 


Q Close Large Gaps 



Don ’ t Close Gaps ： 테두리가 완전히 막힌 곳에만 적용된다. 
Close Small Gaps ： 테두리에 미세한 름이 있어도 적용된다. 
Close Medium Gaps ： 테두리에 약간의 름이 있어도 적용된다. 
Close Large Gaps ： 테두리에 큰 름이 있어도 적용된다. 
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⑨ Paint Bucket Tool 을 리용하여 도형의 안에 색을 채운다. 



⑩ 다음 단추로 쓰일 도형 을 Button Symb 이로 보관한다. 
⑪ 다음 선택도구를 선택하고 단추를 두번찰칵한다. 

그러면 단추편집창문으로 들어 간다. 


▼ Timeline 



1 u 

p |Over Down Hit 




■던 > \ ■£] © 


■ H 1 



⑫ Over, Down 에 키 프레 임 을 설정 한다. 
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⑬ Over 프레 임을 선택하고 단추의 색을 바꾼다. 그리고 Down 프레 임을 선택하고 단 
추의 색을 바꾼다. 

⑭ 문자도구를 리용하여 Stage 에 《재생》이 라고 쓴다. 



문자도구 A 는 본문을 입력할 때 리용한다. 문자도구를 찰칵하면 Properties 
PaneH 본문편집을 위한 Option 들이 나타난다. 


Properties 


A 


Static Text V 

p 노 Times New Roman v 43 T T J 

Tent Tool 

A V 0 T a ； Normal V 0 Auto Kern 


A n ^3 ᄆ Use Deuice Fonts 

沒 


I 


®J 


Format... 


Target： 


V 




Stage 에 본문을 입력하기 위해서는 도구칸에서 문자도구를 잘칵하고 Stage 를 다시 잘 
칵한다. 다음 본문을 입력하면 된다. 


- f 

Macro 


] 

[ 

_ r ，、 

Macromediaf 
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본문을 입력하면 본문칸이 넓어지는것을 알수 있다. 

문자도구를 찰칵하고 Stage 에서 마우스를 끌어 본문입력칸이 나타나게 한 다음 본문 
을 입력 할 때에는 자리 가 다 차면 줄바꾸기 가 진행된다. 



확장가능한 본문칸에 는 오른쪽 웃구석 에 동그라미 가 표시 되 고 확장불가능한 본문칸에 는 
4각형이 표시된다. 4각형표식을 마우스로 두번찰칵하면 확장가능한 본문칸으로 변환된다. 


Properties 



A 


V ： 


Properties Panel 을 보면 알수 있는바와 같이 본문에는 Static Text , Dynamic 
Text , Input Text 의 3 가지 종류가 있다. 

Static Text ： 한번 입력한 본문이 변하지 않는다. 

Dynamic Text ： 자동적으로 내용이 갱신되는 본문칸을 만든다. 

Input Text ： 사용자가 본문(홈페지에서 사용자이름 입력칸과 같은)을 입력할수 있는 
본문칸을 만든다. 
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⑮ 마찬가지 방법 으로 단추를 하나 더 만들고〈〈정 지》라고 쓴다. 


X 


⑯ 앞에서 만든 〈〈행성의 움직임묘사》파일을 열고 새로운 층을 만들고 
， 《재생》단추를 복사하여 불인다. 

























































































































[p Actions 

Ip Movie Control 
® gotoAndPlay 
® gotoAndStop 
® neKtFrame 
® neKtScene 
® on 


A 

_ _ 

+ 

洗 0 ^ & (f 


1 

1 on (press) { 

2 playO ； 

3 } 

4 

(| nil I 

> 

V 

Line 3 of 3, Col 2 



⑫ Layer 3 의 1 번 프레 임을 선택하고 Action Panel 에서 ActionsXMovie Control 
\stop 를 두번찰칵한다. 


Actions - Frame 


Actions for Frame 1 of Layer Name Layer 1 






그러면 오른쪽에 stop 라고 적혀진것을 볼수 있다. stop Action 은 Movie 의 재생을 멈 
추는 기능을 수행 한다. 

⑬《재생》 Button Symbol 을 선택 하고 Action Panel 에서 다음과 같이 설정 한다. 


Actions - Button 


Actions For [No instance name assigned] (Symbol 1) 



amen 
Frasc 
evevop 
prprst 

一®®® 
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⑩《정지 》 Button Symbol 을 선택 하고 Action Panel 에서 다음과 같이 설정 한다. 


t Actions - Button 


^T| Actions for [No instance name assigned] (Symbol 2 ) 



_ Actions 

T] Movie Control 


a 



gotoAndPlay 



gotoAndStop 



neKtFrame 

「 


neKtScene 

대 


on 

1 - 


Play 



prevFrame 



prevScene 



+ J3 ^ ^ I 

冷 SP 

1 on (press) { 

2 stopQ ； 

3 } 


<_ 上」 

> 

fune 3 of 3, Col 2 


Movie 를 실행시켜본다. 

그러면 단추를 찰칵하는데 따라 Movie 재생이 정지되였다 실행되였다 하는것을 알 
수 있다. 
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경 총 


실습 1. Motion Tween 에 의한 Animation 만들기 

① Stage 에 4각형을 하나 그린다. 


② 4각형 을 Rectangle 이 라는 Graphic Symbol 로 보존한다. 



③ Timeline 의 15번 프레 임 에 키 프레 임 을 추가한다. 


- 

I 5 10 1 

기 

L.5 20 i f 

，」 

HH 

- nP 

* UI 

! 

A 



V 

丄 | 머컨 | 히 15 12.0 fp. 
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④ 15번 프레임을 선택하고 4각형의 위치를 적당히 옮긴다. 



⑤ Free Transform 도구를 리용하여 4각형을 회전시키고 크기도 변형시 킨다. 
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⑥ 30번 프레임에 키프레임을 추가한다. 

⑦ 30번 프레임을 선택하고 4각형의 위치를 적당히 옮기고 크기를 조절하고 회전시 
킨 다. 

⑧ 45번 프레임에 키프레임을 추가한다. 

⑨ 45번 프레 임을 선택 하고 4각형을 선택 하여 Delete 건을 눌러 삭제 한다. 

⑩ 1번 프레 임을 선택하고 4각형을 복사한다. 

⑪ 45번 프레 임을 선택하고 Ctrl + Shift+V 건을 눌러 그자리에 붙여놓는다. 


⑫ 1~45번 프레 임전체를 선택하고 오른쪽찰칵하여 Create Motion Tween 을 실행 한다. 



⑬ Enter 건을 눌러 Movie 를 재생해본다. 

4각형 이 회전하면서 크기가 변하는것을 알수 있다. 

⑭ 1번 프레 임에 있는 4각형을 선택한다. 

⑮ Properties Panel 의 Color 항목에서 Advanced 를 선택한다. 


t Properties 



Graphic 


100.0 

X ： 

20.0 




50.0 

Y ： 

20.0 




⑯ Settings 단추를 찰칵하면 Advanced Effect 대화칸이 나타난다. 
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Advanced Effect 


Red = ( 100^ 
Green = ( 100^ 


Blue=( 100^ - 

Alpha = ( 100^ T 


kR) 

kG) 

kB)- 

hA)- 


Help 


Cancel 


OK 


Advanced Effect 대 화칸의 첫번째 입 력칸에 4각형의 원래 색의 몇 %인가를 설정 해 준다. 
다음입 력 칸에 RGB Alpha 값을 입 력 하면 된 다. 

⑫ 1번 프레임의 4각형을 빨간색 ( R =255， G = B =0) 으로 만들기 위하여 첫번째 입력칸 
에는 R =0， G =0， B =0， Alpha =100 으로 입력한다. 이렇게 되면 4각형의 원래색이 영향을 
미치지 못한다. 

두번째 입 력칸에 는 R =255， G = B =0 으로 입 력 한다. 


Advanced Effect 



그러면 4각형 이 빨간색으로 변하는것을 알수 있다. 

⑬ 15번 프레 임의 4각형을 선택한다. 
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⑮ 앞에서와 같이 4각형의 색이 풀색 ( G =255) 으로 되게 한다. 



⑩ 30번 프레임의 4각형의 색을 푸른색 ( B =255) 으로 설정하고 투명도를 0으로 한다. 



⑫ 45번 프레 임 의 4각형 의 색 을 빨간색 ( R =255) 으로 설정 한다. 

© Enter 건을 눌러 Movie 를 실행해본다. 

4각형의 색이 변하는것을 알수 있다. 그리고 30번 프레임에서는 4각형이 없어졌다가 
다시 생겨난다. 
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실습 2. Shape Tween 에 의한 Animation 만들기 


① 도구함에서 문자도구를 선택한다. 

② Stage 에 Macromedia 라고 입력한다. 



③ 문자를 모두 선택하고 차림표띠에서 Modify—Break Apart (혹은 Ctrl + B ) 지령을 
실행 한다. 


Modify 


Text Control Window Help 


Layer... 

Ungroup 


^trl+G 

Ctrl+Shift+G 


Break Apart Ctrl+B 


Distribute to Layers Ctrl+ShiPt+D 


그러면 문자들이 갈라전다. 






Me 

acre 

)media 
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④ Ctrl + B 건을 누른다. 그러면 문자들이 도형으로 변한다. 


Macromedia 


⑤ 40번 프레임에 빈 키프레임을 추가한다. 

⑥ 문자도구를 리용하여 Stage 에 FLASH 라고 입력한다. 


FLASH 


⑦ Ctrl + B 건을 두번 눌러 문자를 도형으로 변환한다. 

⑧ 1~39번사이의 임의의 프레임을 선택한다. 

⑨ Properties Panel 의 Tween 항목에서 Shape 를 선택한다. 
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그러면 Timeline 에서 프레 임들이 연풀색으로 표시된다. 


I 5 10 15 

1 25 30 35 40 

HH 

~ ! 

! 

A 

■ — J 

V 



\ 머 ？]| 린 [■： 20 12.0 fps I.6s < 



Motion Tween 이 적용되였을 때에는 Timeline 의 프레임들이 연보라색으로 표시된다. 

* - 、 電 Motion Tween 은 시 작키 프레 임 이 검 은색 점 으로 표시 되 고 

가운데프레 임 에는 연보라색배 경 에 검은색화살표가 표시된다. 

. - - 부 . Shape Tween 은 시 작키 프레 임 이 검 은색 점 으로 표시 되 고 가운 

데프레 임 에는 연륵색배경 에 검은색화살표가 표시된다. 

* - -I 마지막키프레임이 없는것과 같이 Tweening 이 제대로 구성되지 

않은 경우에는 점선이 나타난다. 

* □! 단일키프레임은 검은색점으로 표시된다. 회색프레임에는 앞의 
프레 임 과 같은 내 용이 포함되 여 있 으며 마지 막프레 임 에 는 빈 4각형 이 표시 된 다. 

_ _ Frame Action 을 지정한 프레임에는 소문자 a 가 표시된다. 

hanirnatiQn I 프레임에 Label 이 포함되여있으면 빨간색기발이 표시된다. 


_ mmMBmm 프레 임 에 Anchor 이 름이 불어있으면 노란색 닻이 표시 된다. 

프레임에 Anchor 이름을 붙이면 전진 또는 후진단추를 리용하여 프레임사이 혹은 장 
면사이를 이동할수 있으므로 Movie 탐색 이 간단해진다. 

이와 같이 Timeline 에서 프레 임의 표시방법 이 다 다르다. 

⑩ 작업 내용을 출력 한다. 

결과를 보고 알수 있는바와 같이 Macromedia 라는 문자가 모양이 달라지면서 FLASH 
로 변하는것을 알수 있다. 
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실습 3. Shape Hint 를 리용한 Animation 만들기 

① 문자도구를 리용하여 Stage 에 1이라고 입력한다. 

② 선택도구를 선택하고 Ctrl + Alt 건을 누르고 끌기하여 하나 더 만든다. 



③ 문자들을 선택하고 Ctrl + B 건을 눌러 도형으로 변환한다. 

④ 30번 프레임에 빈 키프레임을 추가한다. 

⑤ 문자도구를 리용하여 Stage 에 2라고 입력하고 하나 더 복사한다. 



⑥ 문자들을 도형으로 변환한다. 

⑦ 1〜29번사이의 프레 임을 선택하고 Properties Panel 의 Tween 에서 Shape 를 선택 
한다. 

⑧ Enter 건을 눌러 Movie 를 재생해본다. 

⑨ 1번 프레 임을 선택한다. 

⑩ 차림 표띠 에 서 Modify ᅳ Shape ᅳ Add Shape Hint 지 령을 실행 한다. 
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Modify 


Text Control Window Help 



그러면 Stage 에 원안에 a 라고 씌여진 모형이 생긴것을 볼수 있다. 



⑪ Shape Hint 를 하나 더 추가한다. 이번에는 b 라고 씌여져있다. 
⑫ a , b 를 수자 1의 우아래 에 다음그림과 같이 이동시 킨다. 
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⑬ 30번 프레 임을 선택한다. 

⑭ a, b 를 다음그림과 같이 이동시 킨다. 



⑮ Enter 건을 눌러 Movie 를 재생해본다. 



15 10 15 
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Shape Hint 를 리용한쪽이 자기 모양을 비교적 유지하면서 바뀌는것을 알수 있 
다. Shape Hint 는 최 대 26개까지 사용할수 있다. 


실습 4. Mask 를 리용한 Animation 만들기 

① Properties Panel 에서 Background 를 찰칵하여 Movie 의 배경색을 검은색으로 
설정 한다. 


Size: 

Publish ： 

300 w 200 pixels 


厂 

Background ： 

L. " 

m 

거 

Frame R^te ： 

12 

fps 

F\^sh Player S 







② 도구칸에서 문자도구를 선택하고 Macromedia Flash 라고 입력한다. 


Macromedia Flash 


③ Transform Panel 에서 Copy and apply transform 을 찰칵하여 그 자리 에 복사 
한다. 

④ 문자의 색을 약간 어두운 회 색 으로 바꾸어준다. 

⑤ 문자를 약간 이동시켜 립체감이 나게 한다. 


Flash 
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⑥ Timeline 에서 Insert Layer 를 찰칵하여 Layer 를 추가한다. 

⑦ Layer 2의 1번 프레 임을 선택한다. 

⑧ 원형도구를 리용하여 Stage 에 원을 그린다. 



⑨ 방금 그린 원을 선택하고 F 8 건을 눌러 Convert to Symbol 대화칸을 연다. 

⑩ mask 라는 Graphic Symbol 로 보존한다. 

⑪ Layer 2의 20，40번 프레 임 에 키 프레 임 을 추가한다. 

⑫ Layer 1의 40번 프레 임을 선택하고 오른쪽찰칵하여 Insert Frame 을 실행하여 40번 
프레임까지 늘인다. 


1 5 10 15 
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⑬ 1번 프레 임에 있는 mask Graphic Symbol 을 선택하고 왼쪽으로 이동시 킨다. 


룹 romedia Flash 
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⑭ 20번 프레 임에 있는 mask Graphic Symbol 을 선택하여 오른쪽으로 이동시 킨다. 



⑮ 40번 프레임에서는 1번 프레임에서와 같은 위치에 놓이게 한다. 

⑯ 1~39번 프레 임을 선택하고 오른쪽찰칵하여 Create Motion Tween 을 실행한다. 



⑫ Timeline 에서 Layer 2를 선택하고 오른쪽찰칵하여 Mask 를 실행한다. 




Movie 를 실행해보면 Layer 2의 원형부분에서만 글자가 보이는것을 알수 있다. 
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